Firestore typescript does not work as documentation.

[adithep]

https://codesandbox.io/s/amazing-borg-w0m79?file=/src/App.tsx

Check this code sandbox, you will see that ref is not assignable to useFirestoreQueryData as stated in documentation.

Type 'DocumentData' is not assignable to type 'Product'.

Am I doing something wrong or is there work around for this in the meanwhile?

[jimmysafe]

I have same issue.. any update on this?

e

[adithep]

@jimmysafe I think the way forward now is to use withConverter exclusively and not to use this library to inject any field into the doc anymore.

https://firebase.google.com/docs/reference/js/firestore_.firestoredataconverter

This is how I solved it.

export const firestoreConverter = <T extends Record<string, unknown>>() => ({
  toFirestore({ id, ...data }: PartialWithFieldValue<T>): DocumentData {
    return data
  },
  fromFirestore(snapshot: QueryDocumentSnapshot<T>, options: SnapshotOptions): T {
    const data = snapshot.data(options)
    return {
      id: snapshot.id,
      ...data,
    }
  },
})

[jimmysafe]

@adithep thanks very much, it works fine if i pass the whole object into the withConverter params:

However if i pass the function firestoreConverter i get typescript error

I guess i am probably passing the generic in a wrong way. Could you please show me how you have written the collection function?

[adithep]

@jimmysafe collection(...).withConverter(firestoreConverter<Review>())

[jimmysafe]

@adithep i have tried that i get this. sad times :(

[jimmysafe]

Ok i kinda sorted by replacing the firestoreConverter function type params from <T extends Record<string, unknown>> to <T extends Record<string, any>> and now i get no errors and i get correct typings.

@adithep thanks for the support, let me know if you know a better way of doing this 🥇

[hoqpe]

@jimmysafe

Hey! There is a simple solution:

import { CollectionReference } from 'firebase/firestore'

const q = query(
  collection(db, 'task-lists') as CollectionReference<TaskListModel>
)

useFirestoreQuery(['task-lists'], q)

[jimmy-chiang]

@hoqpe Good solution! And doesn't mess up the code a lot.