How can I fix - Property 'map' does not exist on type 'Action'

Question

The code snippets below are part of my ionic3/angularfire2 project. It connects to a Firestore DB - and should return a snapshot observable of a document.

From my web research, I can see that others have used similar syntax - I cannot find solution to mine

// (all other imports are fine)

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

in the constructor, I inject ...

private db: AngularFirestore

the code below has an error (i am seriously unhappy)

// customerRef: AngularFirestoreDocument<Customer>;
this.customerRef = this.db.doc(`customers/${k}`);

// cust: Observable<Customer>;
this.cust = this.customerRef.snapshotChanges().map(actions => {
  return actions.map(action => {
    const data = action.payload.doc.data() as Customer;
    const id = action.payload.doc.id;
    console.log('>>>>', { id, ...data });
    return { id, ...data };
  });
});

I get the following error

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

I have other parts of the project that retrieve observable of collection of some documents (.valueChanges) - and they work just fine.

Please help. (if I have missed to describe something, I apologize - and will do if somebody points it out - tried to focus on the code with error)

Angular CLI: 1.5.5
Node: 6.12.0
OS: darwin x64
Angular: 5.0.3

    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/pro": "1.0.16",
    "@ionic/storage": "2.1.3",
    "angularfire2": "^5.0.0-rc.4",
    "firebase": "4.8.0",
    "ionic-angular": "3.9.2",
    "promise-polyfill": "^7.0.0",
    "rxjs": "5.5.2",

Answer 1

The issue here is the confusion of how snapshotChanges() behaves when dealing with a document or a collection of documents.

The code you used is fine for a collection of documents, but when dealing with documents it changes slightly.

Try this.

// customerRef: AngularFirestoreDocument<Customer>;
this.customerRef = this.db.doc(`customers/${k}`);

// cust: Observable<Customer>;
this.cust = this.customerRef.snapshotChanges().map(action => {
  const data = action.payload.data() as Customer;
  const id = action.payload.id;
  return { id, ...data };
});

And for Angular 6+ that uses newer rxjs

// customerRef: AngularFirestoreDocument<Customer>;
this.customerRef = this.db.doc(`customers/${k}`);

// cust: Observable<Customer>;
this.cust = this.customerRef.snapshotChanges().pipe(map(action => {
  const data = action.payload.data() as Customer;
  const id = action.payload.id;
  return { id, ...data };
}));