Ionic AngularFirestoreCollection Property 'id' does not exist type 'QueryDocumentSnapshot'

Question

I am fairly new to Ionic and I am trying to connect to Firebase database, and while writing the snapshotChange(). I hit an error.

Property 'id' does not exist on type 'QueryDocumentSnapshot<Todo>'.

The code is below,

export interface Todo {
  id?: string;
  task: string;
  priority: number;
  createdAt: number;
}


export class TodoPage implements OnInit {
  private todosCollection: AngularFirestoreCollection<Todo>;

  private todos: Observable<Todo[]>;

  constructor(db: AngularFirestore) {
    this.todosCollection = db.collection<Todo>("todos");

    this.todos = this.todosCollection.snapshotChanges().pipe(
      map((actions) => {
        return actions.map((a) => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;        //the error is here at the a.payload.doc."id"
          return { id, ...data };
        });
      })
    );
  }

Any help is greatly appreciated. Thank you!

Edit: SOLUTION FOUND

I finally got it working, turns out there was some issue with the @angular/fire installation. All I had to do was

npm install firebase
npm install @angular/fire
ng add @angular/fire
finally run npm install again

And the code worked just fine. Evidently, some issues caused dependencies on package.json not to be properly updated.

Found the solution from:1

I have found this github bug about the error you are having, it might be useful to you https://github.com/angular/angularfire/issues/1695 — iker lasaga, May 18 '20 at 09:36
I saw you found the solution, please add it as an answer. It will be helpful for the community members. — iker lasaga, May 19 '20 at 11:46

score 1 · Accepted Answer · answered May 19 '20 at 15:58

The variable you are using does not have ".id" because its type is 'QueryDocumentSnapshot'.

If you are getting this error on compilation time;

One solution is fixing the packages / dependencies and making sure all types are as expected.

npm install firebase @angular/fire
ng add @angular/fire

Another solution is informing your linter / compiler about the type differences.

The following example forces the type to 'any' which can have '.payload.doc.id'.

this.todosCollection = db.collection<Todo>("todos");

this.todos = this.todosCollection.snapshotChanges().pipe(
  map((actions) => {
    return actions.map((a: any) => {
      const data = a.payload.doc.data();
      const id = a.payload.doc.id;
      return { id, ...data };
    });
  })
);

If you are getting this error on the run time you need to first fix the compilation error then make sure the '.id' property exists.

score 0 · Answer 2 · answered May 21 '20 at 11:44

I'm adding here the solution that was found by the poster of the question:

I finally got it working, turns out there was some issue with the @angular/fire installation. All I had to do was

npm install firebase
npm install @angular/fire
ng add @angular/fire
finally run npm install again

And the code worked just fine. Evidently, some issues caused dependencies on package.json not to be properly updated.

Found the solution from:1

Ionic AngularFirestoreCollection Property 'id' does not exist type 'QueryDocumentSnapshot'

2 Answers2