Ionic配合Firebase Firestore异步方法首次调用失效问题

问题背景 #

我是Firebase新手，使用Firestore数据库和Ionic进行开发时遇到了异步调用相关的问题：我将Firestore中存储的数据赋值给item变量，希望通过按钮跳转至新页面展示对应数据，但实际运行时出现异常：点击按钮后URL传递的参数会立即消失，后续所有功能都无法正常运行。此前我遇到过类似问题，使用Angular的异步（async）管道就解决了，但本次场景下该方案没有生效。

相关实现代码 #

列表页组件初始化逻辑 #

ngOnInit() {
  this.itemService.getItemsList().subscribe((res)=>{
    this.Tasks = res.map((t) => {
      return {
        id: t.payload.doc.id,
        ...t.payload.doc.data() as TODO
      };
    })
  });
} 

item.service.ts 服务方法定义 #

constructor(
  private db: AngularFireDatabase,
  private ngFirestore: AngularFirestore,
  private router: Router
) { }

getItemsList() {
  return this.ngFirestore.collection('items').snapshotChanges();
}
getItem(id: string) {
  return this.ngFirestore.collection('items').doc(id).valueChanges();
}

列表页跳转按钮绑定 #

<ion-card *ngFor="let item of Tasks" lines="full">
....
<ion-button routerLinkActive="tab-selected" [routerLink]="['/tabs/item/',item.id]" fill="outline" slot="end">View</ion-button>

详情页itemsDescription.ts初始化逻辑 #

ngOnInit() {
  this.route.params.subscribe(params => {
    this.id = params['id'];
    });
  this.itemService.getItem(this.id).subscribe((data)=>{
  this.item=data;
  });  
}

详情页HTML渲染代码 #

<ion-card-header>
  <ion-card-title>{{item.id}}</ion-card-title>
</ion-card-header>
<ion-icon name="pin" slot="start"></ion-icon>
    <ion-label>{{item.Scadenza.toDate() | date:'dd/MM/yy'}}</ion-label>
<ion-card-content>{{item.Descrizione}}</ion-card-content>

问题表现 #

• Scadenza和Descrizione字段可以正常展示，但id字段无法正常显示
• 预期跳转URL为tabs/items/:id，实际点击按钮后传递的参数会立即消失，URL仅显示tabs/items
• 如果删除{{}}中的数据绑定内容，URL参数就不会消失

解决方案 #

在所有涉及item变量的模板数据绑定处添加可选链运算符即可，比如将{{item.id}}修改为{{item?.id}}，修改后所有功能即可正常运行。

内容的提问来源于stack exchange，提问作者sirss