получение данных по идентификатору документа

Question

Я пытаюсь получить данные по документу, удостоверяющему личность. Консоль разработчика Chrome, но отчеты не определены. Я не могу понять, почему и как это решить.

У меня есть эти компоненты. post-list, post-detail, postService и post.ts.

post.ts

export class Post {
    title: string;
    content: string;
    description: string;
    published: Date;
}

post.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';

import { Post } from "./post";

@Injectable({
  providedIn: 'root'
})
export class PostService {

  postCollection: AngularFirestoreCollection<Post>;
  postDoc: AngularFirestoreDocument<Post>

  constructor(private db: AngularFirestore) {
    this.postCollection = this.db.collection('Article', ref => ref.orderBy('published', 'desc'))
   }

  getPost(){
    return this.postCollection.snapshotChanges().pipe(
      map(action => action.map(a =>{
        const data = a.payload.doc.data() as Post;
        const id = a.payload.doc.id;
        return { id, ...data};
      }))
    )
  }

  getPostData(id: string){
      this.postDoc = this.db.doc<Post>(`post/${id}`)
      return this.postDoc.valueChanges()
  }

}

post-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Post } from '../post';
import { PostService } from '../post.service';

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

  posts: Observable<Post[]>

  constructor(private postService: PostService) { }

  ngOnInit() {
    this.posts = this.postService.getPost()
    console.log(this)
  }

}

пост-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
import { PostService } from '../post.service';
import { Post } from '../post';


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

  post: Post

  constructor(private route: ActivatedRoute,
              private postService: PostService

              ) 
              { }

  ngOnInit() {
    this.getPost()
    console.log(this.post)
  }

  getPost(){
    const id = this.route.snapshot.paramMap.get('id')
    return this.postService.getPostData(id).subscribe(data => this.post = data)
  }

}

в post-list.component.html он работает нормально, и у меня есть данные.

<div *ngFor='let post of posts | async'>
  <h3 routerLink="{{post.id}}">{{post.title}}</h3>
  <p>{{post.description}}</p>
</div>

но в post-detail.component.html ничего нет. Chrome dev console я вижу: post: undefined

<div *ngIf="post">
  <h3>{{post.title}}</h3>
  <p>{{post.content}}</p>

</div>

пожалуйста, кто-нибудь найдет ошибку? Я не знаю, как решить эту проблему и почему сообщение: undefined.