Property 'name' does not exist on type 'unknown'.ts(2339)

Question

I am trying to return an new object with a name property. But it keeps giving me this error, the code compile without any problem though. I am using Angular 9 and AnfularFirestore to access the Firebase

this.db
  .collection('availableExercises')
  .snapshotChanges()
  .pipe(
    map(docArray => {
        return docArray.map(doc => {
            return {
                id: 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[]) => {
      this.availableExercises = exercises;
      this.exercisesChanged.next([...this.availableExercises]);
  });

Here is the interface tha I am using for Exercise

export interface Exercise{
  id: string;
  name: string;
  duration: number;
  calories: number;
  date?: Date;
  state?: 'completed' | 'cancelled' | null;
}

Answer 1

Most probably it's a TS Lint error. One workaround would be to use square brackets to access properties instead of the dot operator. Try the following

return docArray.map(doc => {
  return ({
    id: doc.payload.doc['id'],
    name: doc.payload.doc.data()['name'],
    duration: doc.payload.doc.data()['duration'],
    calories: doc.payload.doc.data()['calories']
  });
});

If you still get the error, try replacing the dot operators up the access chain.

Nevertheless, the generated JS should be valid regardless of this error.