TypeScript error when using `UpdateData<T>` with composite interfaces referencing other interfaces

[BenJackGill]

Operating System

macOS Sequoia 15.1.1

Environment (if applicable)

node

Firebase SDK Version

11.0.2

Firebase SDK Product(s)

Firestore

Project Tooling

Vue 3 with Vite

Detailed Problem Description

TypeScript throws an error when we use UpdateData<T> and T is an interface that is a combination of other interfaces.

This example works because we only have a single User interface. It works because the User interface does not reference any other interfaces:

interface User {
  age: number;
  emotion: {
    happy: boolean;
    sad: boolean;
  };
  name: string;
}

const userUpdate: UpdateData<User> = {
  age: 30,
  "emotion.happy": true,
  name: "Alice",
};

const userDocRef = doc(collection(db, "users", "alice"));

await updateDoc(userDocRef, userUpdate);

This example does not work because we have multiple interfaces that reference each other. Here the User interface is referencing the Emotions interface, causing the error to show:

interface Emotions {
  happy: boolean;
  sad: boolean;
}

interface User {
  age: number;
  emotion: Emotions; // <-- Notice this change!
  name: string;
}

const userUpdate: UpdateData<User> = {
  age: 30,
  "emotion.happy": true, // <--- Error shows here
  name: "Alice",
};

const userDocRef = doc(collection(db, "users", "alice"));

await updateDoc(userDocRef, userUpdate);

This is the TypeScript error we see:

Object literal may only specify known properties, and '"emotion.happy"' does not exist in type '{ age?: number | FieldValue | undefined; emotion?: FieldValue | { happy?: boolean | FieldValue | undefined; sad?: boolean | FieldValue | undefined; } | undefined; name?: string | ... 1 more ... | undefined; }'.ts(2353)

Since types are often built as a composite of other types, it would be good to fix this.

Steps and code to reproduce issue

Use the code snippets above to see the errors.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[DellaBitta]

Hi @BenJackGill,

This seems to be a general syntax error outside the bounds of Firestore.

Taking Firestore out of it, this also fails to compile with TypeScript:

const user : User = {
      age: 30,
      "emotion.happy": true, // <--- Error shows here
      name: "Alice",
     };

However, these three options don't throw compliation errors:

const emotion : Emotions = {
  happy: true,
  sad: false
};
    
const user : User = {
  age: 30,
  emotion,
  name: "Alice",
};
     
const userUpdate: UpdateData<User> = {
  age: 30,
   emotion,
   name: "Alice",
};

const userUpdate2: UpdateData<User> = {
  age: 30,
  emotion: {
    happy: true
  },
  name: "Alice"
};

Hope this helps!