collection onSnapshot document spread error

[puchesjr]

I am encountering an error when attempting to use v9 as follows - perhaps I am not doing something properly, but the error message is rather cryptic.

onSnapshot(
      collection(firestore, colRef),
      (snap) => {
        if (snap.empty) {
          setStatus('fetched');
          return;
        }
        const documents = snap.docs.map((doc) => ({
          id: doc.id,
          ...doc.data() // error: Spread types may only be created from object types
        }));
        setData(documents);
        setStatus('fetched');
      },
      (error) => {
        setData([error]);
        setStatus('error');
      }
    );

[dbanisimov]

This looks like a typescript error for me. Is there a chance that your colRef is incorrectly typed causing doc.data() to be something that is not an object?

[puchesjr]

colRef is a string which should work properly. Perhaps it cannot take an unknown string?

[dbanisimov]

Yeah colRef should be string in this case.

collection(firestore, colRef) is of type CollectionReference<DocumentData> by default, so I would expect that onSnapshot should infer QuerySnapshot<DocumentData> type for (snap) => {} argument, but for some reason it fails to do that and infers QuerySnapshot<unknown> instead. That causes the spread error. Maybe that's something that Firebase team can take a look at.

From my personal experience, I would advise to use .withConverter() method. It just makes data conversions, like you're trying to do, very easy and works well with types inference throughout.

[puchesjr]

I don't think .withConverter() should matter here. I do see the point of using .withConverter() if I was attempting to map data to a Class as specified in the docs, but I simply want the entire document and the id which is the reason for my destructured/spread of the doc.data()

[puchesjr]

this works, but the above does not. as you can see the above uses the spread operator and this example does not.

onSnapshot(
      collection(firestore, colRef),
      (snap) => {
        if (snap.empty) {
          setStatus('fetched');
          return;
        }
        const documents = snap.docs.map((doc) => ({
          id: doc.id,
          data: doc.data()
        }));
        setData(documents);
        setStatus('fetched');
      },
      (error) => {
        setData([error]);
        setStatus('error');
      }
    );

[samtstern]

@puchesjr I am able to reproduce this and since it's a bug I am going to move it to an issue.

[samtstern]

#4812