error TS2740: Type 'Observable<DocumentData>' is missing the following properties from type 'ProjectPage[]': length, pop, push, concat, and 25 more

Question

I'm not sure how to fix this error. I've seen some posts, but I still haven't gotten to the answer to this problem, I'm guessing it's pretty easy, but I'm pretty new to Angular and really have no idea on how to fix it.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFirestore } from '@angular/fire/firestore';
import { switchMap } from 'rxjs/operators';

import { ProjectPage } from './project-page';

@Component({
  selector: 'app-project-page',
  templateUrl: './project-page.component.html',
  styleUrls: ['./project-page.component.scss']
})
export class ProjectPageComponent implements OnInit {

  project$: ProjectPage[];
  constructor(private afs: AngularFirestore, private route: ActivatedRoute) {}

  ngOnInit() {
    this.project$ = this.route.paramMap.pipe(
      switchMap((params) => {
        const name = params.get('name');
        return this.afs.doc('projects/' + name).ref.get()
        .then((doc) => {
          return doc.data();
        })
      })
    )
  }
}

Answer 1

Well the problem here is your typing. You specify project$ to be of type ProjectPage[] but by using the route paramMap you are assigning it to an Observable. The typings would probably work if you change

project$: ProjectPage[];

to

project$: Observable<ProjectPage[]>;