[🐛] 🔥Firestore Typescript types are not working anymore with 22.3.0

[dhenneke]

Issue

We noticed that our TypeScript setup doesn't work anymore with the latest 22.3.0. This is most likely caused by #8378.

One cause could be that the following type points to Query<AppModelType, DbModelType>:

react-native-firebase/packages/firestore/lib/modular/query.d.ts

Lines 103 to 107 in 7eaaf18

	export declare function query<AppModelType, DbModelType extends DocumentData>(
	query: Query<AppModelType, DbModelType>,
	compositeFilter: QueryCompositeFilterConstraint,
	...queryConstraints: QueryNonFilterConstraint[]
	): Query<AppModelType, DbModelType>;

But that type (and similar ones in this file) was not updated and doesn't support the second parameter:

react-native-firebase/packages/firestore/lib/index.d.ts

Line 980 in 7eaaf18

export interface Query<T extends DocumentData = DocumentData> {

---

For reference this is how this is typed in firebase-js-sdk:

https://github.com/firebase/firebase-js-sdk/blob/d91169f061bf1dcbfe78a8c8a7f739677608fcb7/packages/firestore/src/lite-api/query.ts#L136-L140

Using this type:

https://github.com/firebase/firebase-js-sdk/blob/d91169f061bf1dcbfe78a8c8a7f739677608fcb7/packages/firestore/src/lite-api/reference.ts#L118-L121

---

Reproducible example with type errors

rnfirebase-example.ts:

• ✅: works as expected
• 🤔: The custom type disappeared for some reason.
• 🚨: why is this suddenly any?

import {
    collection,
    doc,
    FirebaseFirestoreTypes,
    getDoc,
    getDocs,
    getFirestore,
    limit,
    query,
} from '@react-native-firebase/firestore'

type UserType = { id: string }

const firestore = getFirestore()

/// OLD API ///

{
    // GET SINGLE DOCUMENT //

    // 22.2.1    `FirebaseFirestoreTypes.DocumentReference<UserType>` ✅
    // 22.3.0    `FirebaseFirestoreTypes.DocumentReference<UserType>` ✅
    // Expected: `FirebaseFirestoreTypes.DocumentReference<UserType>`
    const userReferenceWithT = doc(
        firestore,
        'users/123',
        // this cast worked in 22.2.1, should actually be `doc<UserType>`
    ) as FirebaseFirestoreTypes.DocumentReference<UserType>
    // 22.2.1    `FirebaseFirestoreTypes.DocumentSnapshot<UserType>` ✅
    // 22.3.0    `FirebaseFirestoreTypes.DocumentSnapshot<UserType>` ✅
    // Expected: `FirebaseFirestoreTypes.DocumentSnapshot<UserType>`
    const userSnapshotWithT = await getDoc(userReferenceWithT)
    // 22.2.1    `UserType | undefined` ✅
    // 22.3.0    `UserType | undefined` ✅
    // Expected: `UserType | undefined`
    const _userWithT = userSnapshotWithT.data()

    // GET MULTIPLE DOCUMENTS FROM COLLECTION //

    // 22.2.1:   `FirebaseFirestoreTypes.Query<UserType>` ✅
    // 22.3.0:   `FirebaseFirestoreTypes.Query<UserType>` ✅
    // Expected: `FirebaseFirestoreTypes.Query<UserType>`
    const usersQueryReferenceWithT = query(
        // this cast worked in 22.2.1, should actually be `query<UserType>`
        collection(firestore, 'users') as FirebaseFirestoreTypes.CollectionReference<UserType>,
        limit(10),
    )
    // 22.2.1    `FirebaseFirestoreTypes.QuerySnapshot<UserType>` ✅
    // 22.3.0    `any` 🚨
    // Expected: `FirebaseFirestoreTypes.QuerySnapshot<UserType, UserType>`
    const usersSnapshotWithT = await getDocs(usersQueryReferenceWithT)
    // 22.2.1: `UserType[]` ✅
    // 22.3.0 `any` 🚨
    // Expected: `UserType[]`
    const _usersWithT = usersSnapshotWithT.docs.map((d) => d.data())
}

/// UPDATED API ///

{
    // GET SINGLE DOCUMENT //

    // 22.2.1:   ... didn't exist ...
    // 22.3.0    `any` 🚨
    // Expected: `FirebaseFirestoreTypes.DocumentReference<UserType, UserType>`
    const userReferenceWithT = doc<UserType, UserType>(firestore, 'users/123')
    // 22.2.1:   ... didn't exist ...
    // 22.3.0    `FirebaseFirestoreTypes.DocumentSnapshot<unknown>` 🤔
    // Expected: `FirebaseFirestoreTypes.DocumentSnapshot<UserType, UserType>`
    const userSnapshotWithT = await getDoc(userReferenceWithT)
    // 22.2.1:   ... didn't exist ...
    // 22.3.0    `unknown` 🤔
    // Expected: `UserType | undefined`
    const _userWithT = userSnapshotWithT.data()

    // GET MULTIPLE DOCUMENTS FROM COLLECTION //

    // 22.2.1:   ... didn't exist ...
    // 22.3.0:   `any` 🚨
    // Expected: `FirebaseFirestoreTypes.Query<UserType, UserType>`
    const usersQueryReferenceWithT = query<UserType, UserType>(
        collection(firestore, 'users'),
        limit(10), // This isn't valid for some reason 🚨
    )
    // 22.2.1:   ... didn't exist ...
    // 22.3.0    `any` 🚨
    // Expected: `FirebaseFirestoreTypes.QuerySnapshot<UserType, UserType>`
    const usersSnapshotWithT = await getDocs(usersQueryReferenceWithT)
    // 22.2.1:   ... didn't exist ...
    // 22.3.0 `any` 🚨
    // Expected: `UserType[]`
    const _usersWithT = usersSnapshotWithT.docs.map((d) => d.data())
}

---

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[MichaelVerdon]

Hi there, I don't seem to be able to reproduce this, could you provide a repo I could clone and investigate further? Could you also show any log output you get?

[dhenneke]

I pushed my example from above into this repo: https://github.com/dhenneke/react-native-firebase-issues-8611

Run npm run typecheck and/or look at it in an IDE. The comments show which types we expect and which types are returned.

[MichaelVerdon]

Hi there, I was able to get it working by importing FirebaseFirestoreTypes and casting using that. e.t.c This should expose the types and get rid of the linter error.

const usersQueryReferenceWithT = query(
              collection(firestore, "users") as FirebaseFirestoreTypes.CollectionReference<UserType>,
              limit(10)
            );

[dhenneke]

For the limit, yes. But passing that reference to getDocs will still result in any instead of a properly typed snapshot. And we don't really want to do const usersSnapshotWithT = await getDocs(usersQueryReferenceWithT) as FirebaseFirestoreTypes.QuerySnapshot<UserType> because we loose type safety for the queries in our code.