AngularFire 7.0.4版本如何获取Firestore集合的实时变更数据

AngularFire v7采用模块化Firebase API后，docSnapshots仅用于监听单个文档的实时变更，你用它处理集合数据自然无法拿到预期的集合数组结果。你需要使用对应集合场景的监听API实现和旧版本一致的能力。

1. Service.ts 调整 #

首先导入正确的API，替换原有的单文档相关方法：

import { collection, collectionSnapshots, Firestore } from '@angular/fire/firestore';
import { map } from 'rxjs';

// 类内方法
getInboxCollection(userId: string) {
  // 创建集合引用
  const inboxRef = collection(this.firestore, `/user/${userId}/inbox/`);
  // 监听集合实时快照
  return collectionSnapshots(inboxRef).pipe(
    map(snapshots => {
      // 遍历所有文档快照，挂载id后返回，和旧版本逻辑完全对齐
      return snapshots.map(snapshot => {
        const data = snapshot.data();
        data['id'] = snapshot.id;
        return data;
      })
    })
  )
}

2. Component.ts 无需修改 #

原有调用逻辑可以直接复用，不需要调整：

this.service.getInboxCollection(this.userId).subscribe((res: any) => {
  console.log(res);
})

你可以根据业务需求选择更适配的集合监听API：

• collectionSnapshots：每次集合变更返回全量文档快照，和旧版本snapshotChanges行为完全一致，适合需要全量集合数据渲染的场景
• collectionChanges：仅返回本次发生变更（新增/修改/删除）的文档快照，适合处理增量更新场景，性能开销更低
• collectionData：直接返回解析后的文档数据数组，不带文档ID，不需要文档ID时可以省略手动遍历挂载ID的逻辑，代码更简洁

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