@angular/fire: ERROR FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

Question

I am getting error when trying to read firestore collection. I have already checked available solutions available on stackoverflow but still not able to resolved this issue.

I have implemented the code with AngularFire Cloud Firestore document. https://github.com/angular/angularfire/blob/master/docs/firestore.md#cloud-firestore

ERROR FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore main.ts:13 FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

"@angular/core": "^16.2.0", "@angular/fire": "^7.6.1", "firebase": "^10.3.1",

app.module.ts

imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideMessaging(() => getMessaging()),
    providePerformance(() => getPerformance()),
    provideRemoteConfig(() => getRemoteConfig()),
    provideStorage(() => getStorage())
  ]

auth.service.ts

import { Inject, Injectable, inject } from '@angular/core';
import { Observable } from 'rxjs';
import { Auth, authState, signInWithEmailAndPassword, 
    createUserWithEmailAndPassword, onAuthStateChanged, 
    signOut, GoogleAuthProvider,
    user} from "@angular/fire/auth";
import { Firestore, collectionData, collection, getFirestore, getDocs  } from "@angular/fire/firestore";
import { AngularFireAuth,  } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthService {
    userData: any; 
    UsersCollection: any;
    UsersData: any; 

    constructor( 
        private auth: Auth,
        private firestore: Firestore,
        private afAuth: AngularFireAuth,
        private router: Router
        ) {
            const itemCollection = collection(this.firestore, 'Classes');
    }
}

console log output

Answer 1

This issue has been resolved after updating version of decencies of "@angular/fire", "firebase" and "rxfire" in package.json file

For now, Firebase v10 is not compatible with the latest AngularFire stable release – there is a new AngularFire release coming that will support the latest v10

https://github.com/angular/angularfire/issues/3435

{
...
  "dependencies": {
   ...
    "@angular/fire": "^7.6.1",
    "firebase": "^9.23.0", // forcing below 10
    ...
  },
  "devDependencies": {
    "rxfire": "6.0.3" // force a version lower than 6.0.4
  }
}