AngularFire Firestore Property 'map' does not exist on type 'Action<DocumentSnapshot<any>>'

Question

I am following the firebase docs on collections and cannot figure out why my code does not work as per the docs when trying to retrieve a collection of documents with the document id.

My IDE shows the following error:

Property 'map' does not exist on type 'Action< DocumentSnapshot< any>>'.

For the following code:

this.userDocRef = this.afs.doc<any>(`users/${user.uid}`);
this.userDoc$ = this.userDocRef.snapshotChanges().pipe(
  map(actions => {
    return actions.map(a => { // error throws here
      const data = a.payload.doc.data() as any;
      const id = a.payload.doc.id;
      return { id, ...data };
    })
  })
)

When I run this code I get the following error:

ERROR TypeError: actions.map is not a function

How do I refactor this to get it to work correctly?

"firebase": "^5.0.4"
"@angular/core": "^6.1.0"
"angularfire2": "^5.0.0-rc.10"

Answer 1

Your mapping code is wrong:

map(actions => {
    return actions.map(a => { // error throws here
      const data = a.payload.doc.data() as any;
      const id = a.payload.doc.id;
      return { id, ...data };
    })
 })

This is used for mapping collections. You're not itterating over a collection, but a single document

Try:

this.userDoc$ = this.userDocRef.snapshotChanges()
    .pipe(
        map(action => {
            const data = action.payload.data();
            const id = action.payload.id;
            return { id, ...data };
        })
     );