如何通过Angular应用获取Firestore文档数据及对应文档ID？

实现方案 #

你当前调用的snapshotChanges()接口已经包含了文档ID和全量字段数据，仅需对返回结果做映射处理即可拿到需要的格式，修改代码如下：

1. 组件侧直接处理返回结果 #

在订阅回调中遍历返回的快照列表，分别提取ID和字段数据组装即可：

// 类型定义可根据实际业务调整，这里提前预留id字段
public posts: Array<{id: string, [key: string]: any}> = [];    

this.postService.getRecentFivePosts().subscribe((resList) => {
  this.posts = resList.map(snapshotItem => {
    const docRef = snapshotItem.payload.doc;
    return {
      id: docRef.id, // 获取Firestore自动生成的文档ID
      ...docRef.data() // 展开文档所有自带字段
    }
  });
  // 此时posts数组每一项都同时包含id和帖子全量数据，可直接用于页面渲染
  console.log(this.posts);
});

2. （可选）Service层提前做数据映射 #

如果多个地方需要用到带ID的帖子数据，可以直接在Service层处理好再返回，简化组件侧代码：

import { map } from 'rxjs/operators';

// 其他Service代码省略
getRecentFivePosts() {
  return this.firestore.collection('Post', ref => ref.orderBy('date', 'desc').limit(5))
    .snapshotChanges()
    .pipe(
      map(resList => resList.map(snapshotItem => {
        const docRef = snapshotItem.payload.doc;
        return {
          id: docRef.id,
          ...docRef.data() as any
        }
      }))
    );
}

修改后组件侧订阅时直接拿到的就是组装好的带ID的数组，无需额外处理。

类型优化建议 #

不推荐使用any类型，可以提前定义帖子的业务接口保证类型安全：

interface Post {
  id: string;
  title: string;
  content: string;
  date: Date;
  // 补充其他你业务中用到的Post字段
}

对应把posts类型改为Post[]，docRef.data()的类型断言改为as Omit<Post, 'id'>即可。

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