ERROR FirebaseError: Expected type '_Query', but it was: a custom _CollectionReference object in 21.0.0-rc.0

[jakehockey10]

Issue

Upgraded to the release candidate and using the following collection subscription:

collectionData(collection(firestore, `users/${u.uid}/devices`), {
    idField: 'id',
})

Error

ERROR FirebaseError: Expected type '_Query', but it was: a custom _CollectionReference object

Analysis

Not sure how to provide more detail on this, but it seems to be during a cast to Query in the onSnapshot handler.

[JGSolutions]

I am getting the same issue no response to this?

ANYONE????

[trungnghia112]

I’m currently using this workaround for my Angular 21 projects, and it effectively fixes the Expected type '_Query' error.

  /**
   * One-time Fetch (Promise to Observable)
   */
  fetchDataOnce(path: string): Observable<any[]> {
    const colRef = collection(this.firestore, path);
    const q = query(colRef, where('isActive', '==', true));
    return from(getDocs(q)).pipe(
      map(snap => snap.docs.map(doc => ({ id: doc.id, ...doc.data() })))
    );
  }

  /**
   * Real-time Stream (Optimized for toSignal)
   */
  getDataStream(path: string): Observable<any[]> {
    const colRef = collection(this.firestore, path);
    const q = query(colRef, where('isActive', '==', true));

    return new Observable(subscriber => {
      const unsubscribe = onSnapshot(q, {
        next: (snap) => {
          const items = snap.docs.map(doc => ({ id: doc.id, ...doc.data() }));
          subscriber.next(items);
        },
        error: (err) => subscriber.error(err)
      });
      
      // Cleanup: This runs when the component is destroyed
      return () => unsubscribe();
    });
  }

[jaytonic]

Same issue for me with:

const profileRef = doc(this.firestore, 'profile/' + user.uid);
return docData(profileRef).pipe(....);

[jaytonic]

@jamesdaniels any chance you could integrates the fix proposed by @trungnghia112 ?

[lukeskelding]

Just incase it helps anyone else I experienced this issue when my imports were split between @angular/fire/firestore and firebase/firestore.

When I amended them all to be from @angular/fire/firestore it resolved the issue.

[JGSolutions]

@lukeskelding My imports are not split and get the same error

[jakehockey10]

Same, my imports are all from angular fire

[iiceman40]

I got the same error when trying to retrieve data using collectionData as described in the documentation here: https://github.com/angular/angularfire/blob/21.0.0-rc.0/docs/firestore.md#reading-data

@trungnghia112 workaround works... I can get data that way, but isn't really a fix for the problem.

[tscislo]

My imports are also not split and I get the same error. Waiting for stable v21

[armando-navarro]

Thanks everyone for the reports and the patience on this one, and thanks @trungnghia112 and @lukeskelding for the workarounds you shared.

I reproduced this and I'm confident about the mechanism now. Short version: the error appears when a project ends up with two copies of the firebase SDK installed at once, and they don't recognize each other's objects.

What happens

• @angular/fire@21.0.0-rc.0 depends on firebase@^12, but rxfire@6.1.0 (the library AngularFire uses under the hood for collectionData/docData) only accepts firebase 9 through 11.
• If your own package.json still has firebase@11.x (typical after upgrading from AngularFire 20), npm keeps firebase 11 at the root for rxfire and installs a second, nested firebase 12 for @angular/fire.
• Your collection() then comes from firebase 12 while the subscription code runs against firebase 11, and firebase's internal type check rejects the "foreign" object with exactly this error.

This also explains why the error hits projects whose imports all come from @angular/fire/firestore: the split happens in module resolution inside node_modules, not in your source code.

Check and fix

Run npm ls firebase. If you see two versions, that's this bug. Fix: upgrade your own firebase dependency alongside AngularFire, e.g. npm i firebase@^12. In my reproduction that removes the duplicate and the error is gone.

We have also widened rxfire's accepted firebase range upstream (FirebaseExtended/rxfire#152, merged and awaiting a release), which removes the peer conflict for fresh installs. Note it does not remove the need to bump your own firebase dependency to ^12 when upgrading an existing app; the upcoming release notes will say this loudly.

If npm ls firebase shows a single 12.x for you and you still hit this error, please post the output here. That would mean there's a second mechanism and I'll dig back in.