Property ‘id/name/duration/calories’ does not exist on type ‘unknown’

import { NgForm } from '@angular/forms';
import { Exercise } from './../exercise.model';
import { TrainingService } from './../training.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable, Subscriber } from 'rxjs';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-new-training',
  templateUrl: './new-training.component.html',
  styleUrls: ['./new-training.component.css'],
})
export class NewTrainingComponent implements OnInit {
  exercises: Observable<Exercise[]>;

  constructor(
    private trainingService: TrainingService,
    private db: AngularFirestore
  ) {}

  ngOnInit(): void {
    this.exercises = this.db
      .collection('availableExercises')
      .snapshotChanges()
      .map((docArray) => {
        return docArray.map((doc) => {
          return {
            id: doc.payload.doc.data().id,
            name: doc.payload.doc.data().name,
            duration: doc.payload.doc.data().duration,
            calories: doc.payload.doc.data().calories,
          };
        });
      });
  }

  onStartTraining(form: NgForm) {
    this.trainingService.startExercise(form.value.exercise);
  }
}

Have issue with id, name, duration, and calories.. they are all underlined and error says: Property does not exist on type ‘unknown’ for all four. So not sure what the issue is. I have tried as well

id: doc.payload.doc['id'],
name: doc.payload.doc['name'],
duration: doc.payload.doc['duration'],
calories: doc.payload.doc['calories'],

doesn’t work as well. Was repeating after Maximilian Schwarzmuller’s tutorial. Would appriciate any help.

Source: Angular Questions