Angular9/Ionic5从Cloud Firestore拉取数据渲染到ion-list问题

问题根源 #

1. 数组初始化语法错误：clientList 没有正确初始化为空数组，实际值为undefined，调用push方法自然抛出类型错误
2. Firestore onSnapshot 回调运行在Angular变更检测区域之外，即使数组有值，页面也可能不会触发渲染
3. 没有处理快照重复推送的问题，后续数据更新会导致列表重复累加

修复步骤 #

1. 修正 src/app/tab1/tab1.page.ts 代码 #

首先修正变量定义、注入依赖，再调整快照回调逻辑：

import { Component, NgZone, OnDestroy } from '@angular/core';
import { ClientPage } from '../client/client.page';
import { NewclientPage } from '../newclient/newclient.page';
// 修正接口导入路径，和你定义的接口路径对应
import { client } from '../models/client/client';
import { AlertController, NavController } from '@ionic/angular';

import { getApp } from '@firebase/app';
import { getFirestore, collection, query, onSnapshot, Unsubscribe } from "firebase/firestore";

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnDestroy {
  private unsubscribe: Unsubscribe;
  public search: string;
  // 修正初始化语法：冒号是类型声明，等号才是赋值
  public clientList: client[] = [];
  
  // 注入NgZone用于触发Angular变更检测
  constructor(private navCtrl: NavController, private alertCtrl:AlertController, private ngZone: NgZone) {}

  ngOnInit(){
    const firebaseApp=getApp();
    const db=getFirestore(firebaseApp);
    const q = query(collection(db,'clients')); 
    
    this.unsubscribe = onSnapshot(q,(querySnapshot)=>{
      // 每次快照更新先清空数组，避免数据重复
      this.clientList = [];
      // 回调包在ngZone.run里，确保Angular能检测到数据变更触发渲染
      this.ngZone.run(() => {
        querySnapshot.forEach((doc)=>{
          // 加类型断言符合TS类型要求
          this.clientList.push(doc.data() as client);
          console.log(doc.id, " => ", doc.data());
        });
      })
    });
  }

  // 页面销毁时取消订阅，避免内存泄漏
  ngOnDestroy() {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }
  
  openClient(){
    this.navCtrl.navigateForward("/client")
  }
  newClient(){
    this.navCtrl.navigateForward("/newclient")
  }
}

2. 可选性能优化 #

如果列表数据量较大，可以给*ngFor加trackBy减少不必要的DOM重绘，修改src/app/tab1/tab1.page.html里的ion-item定义：

<ion-item *ngFor="let client of clientList; trackBy: trackByUniqueId" lines="none" button (click)='openClient()' >

然后在ts文件中添加对应的trackBy方法：

trackByUniqueId(index: number, item: client) {
  // 返回客户端的唯一标识字段，比如手机号
  return item.phone;
}

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