Property doesn't exist on type {}

Question

I am trying to get a list of objects from a firebase db using snapshotChanges.

Angular Version: 7.2.0, Firebase Version: 5.8.1, RxJS Version: 6.3.3, AngularFire2: 5.1.1

My code is the following:

this.fbSubs.push(this.db
      .collection('availableExercises')
      .snapshotChanges()
      .pipe(
        map(docArray => {
          return docArray.map(doc => {
            return {
              idExercise: doc.payload.doc.id,
              name: doc.payload.doc.data().name,
              duration: doc.payload.doc.data().duration,
              calories: doc.payload.doc.data().calories
            };
          });
        })
      )
      .subscribe((exercises: Exercise[]) => {
        // code...
      }, error => {
        // code...
      }));

When I try to compile this code, I get the following errors:

ERROR in src/app/training/training.service.ts(41,44): error TS2339: Property 'name' does not exist on type '{}'.
    src/app/training/training.service.ts(42,48): error TS2339: Property 'duration' does not exist on type '{}'.
    src/app/training/training.service.ts(43,48): error TS2339: Property 'calories' does not exist on type '{}'.

I believe the syntax may be outdated from a previous version of RxJS but I can't seem to work out what I need to change.

Answer 1

So I had to slightly change the code around in .pipe.map() to return the data as "Exercise" like so:

.pipe(
    map(docArray => {
      return docArray.map(doc => {
        const data = doc.payload.doc.data() as Exercise;
        const idExercise = doc.payload.doc.id;
        return {idExercise, ...data};
      });
    })
  )