title: Property 'id/name/duration/calories' does not exist on type 'unknown'
body: <pre><code>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&lt;Exercise[]&gt;;
  
    constructor(
      private trainingService: TrainingService,
      private db: AngularFirestore
    ) {}
  
    ngOnInit(): void {
      this.exercises = this.db
        .collection('availableExercises')
        .snapshotChanges()
        .map((docArray) =&gt; {
          return docArray.map((doc) =&gt; {
            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);
    }
  }
  </code></pre>
  <p>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</p>
  <pre><code>id: doc.payload.doc['id'],
  name: doc.payload.doc['name'],
  duration: doc.payload.doc['duration'],
  calories: doc.payload.doc['calories'],
  </code></pre>
  <p>doesn't work as well. Was repeating after Maximilian Schwarzmuller's tutorial. Would appriciate any help.</p>