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