Firestore documentation is broken

[jondthompson]

So, I'm trying to use the angularfire Firestore, and following the documentation:

import { Component, inject } from '@angular/core';
import { Auth, User, user } from '@angular/fire/auth';
import { Firestore, collection, collectionData} from '@angular/fire/firestore';
import { from, Observable } from 'rxjs';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-user',
    imports: [CommonModule],
    templateUrl: './user.component.html',
    styleUrl: './user.component.scss'
})

export class UserComponent {
  private firestore: Firestore= inject(Firestore);
  users$: Observable<any[]>;
  displayName:string = "";
  private auth = inject(Auth);
  user$ = user(this.auth);

  constructor() {
      const userProfileCollection = collection(this.firestore, 'users');
      this.users$ = collectionData(userProfileCollection)
    }
}

This results with a firebase error:
FirebaseError: [code=invalid-argument]: Expected type '_Query', but it was: a custom _CollectionReference object

Now, looking at the Firestore example module, it uses getDoc to get a document, so let's try getDocs for a collection...
const userProfileCollection = from(getDocs(collection(this.firestore, 'users'))); userProfileCollection.forEach(value => { console.log(value.docs)})

This works in that my collection is pulled from Firestore. However, it is pulled as an array of QueryDocumentSnapshot2 documents, which is not compatible with ngFor like the angular fire Firestore documentation shows. I'm working through how to massage the data into something usable, but in the meantime, I've become frustrated at the state of the Firestore documentation in AngularFire.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[rgant]

What is the (complete) output of ng version when run on the command line at the root of your Angular project?

Also please include the output of npm list firebase, or use whatever package management tool you want to show the installed version dependencies of firebase.

For example

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.2.1
Node: 20.18.3
Package Manager: npm 11.2.0
OS: darwin arm64

Angular: 19.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.1
@angular-devkit/build-angular   19.2.1
@angular-devkit/core            19.2.1
@angular-devkit/schematics      19.2.1
@angular/fire                   19.0.0
@schematics/angular             19.2.1
rxjs                            7.8.1
typescript                      5.7.3
zone.js                         0.15.0
    
$ npm list firebase
├─┬ @angular/fire@19.0.0
│ ├── firebase@11.4.0
│ └─┬ rxfire@6.1.0
│   └── firebase@11.4.0 deduped
└─┬ @firebase/rules-unit-testing@4.0.1
  └── firebase@11.4.0 deduped

[jondthompson]

 % ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.2.0
Node: 22.14.0
Package Manager: npm 11.1.0
OS: darwin x64

Angular: 19.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.0
@angular-devkit/build-angular   19.2.0
@angular-devkit/core            18.2.14
@angular-devkit/schematics      18.2.14
@angular/fire                   18.0.1
@schematics/angular             18.2.14
rxjs                            7.8.2
typescript                      5.5.4
zone.js                         0.15.0

% npm list firebase
project@0.0.0
├─┬ @angular/fire@18.0.1 overridden
│ ├── firebase@10.14.1
│ └─┬ rxfire@6.1.0
│   └── firebase@11.4.0 deduped
└── firebase@11.4.0

[jondthompson]

Thanks, you pointed me in the right direction. I had mucked with AngularFirebaseUI a bit before abandoning it, and didn't get all of the dependencies properly updated after I did. My apologies for claiming it was the documentation's fault.

[rgant]

BTW, this isn't the best forum for Angular & AngularFire questions. For that recommend the Angular Community Discord

[jondthompson]

I basically copy and pasted my discord post to #angularfire2 into this, as I hadn't gotten a response from them. I was really frustrated.