Angular中通过非ID条件查询Firestore时如何获取文档ID

你当前的代码通过snapshotChanges()获取查询结果，但仅能拿到文档内的数据，无法获取文档ID，无需将ID存储到文档数据中，可通过以下方法直接获取：

核心解决方案 #

doc.payload.doc对象不仅包含文档数据（通过data()方法获取），还直接暴露了id属性，通过访问该属性即可获取文档ID。

修改后的订阅代码示例 #

this.pageUrl = this.actRoute.snapshot.paramMap.get('pageUrl');
this.getGalleryByPage(this.pageUrl).subscribe(res => {
  const myArray = [];
  res.forEach((doc) => {
    const docData = doc.payload.doc.data();
    const docId = doc.payload.doc.id; // 获取文档ID
    // 将ID与文档数据合并为一个对象（按需选择）
    const item = { id: docId, ...docData };
    myArray.push(item);
    console.log('文档ID:', docId);
    console.log('文档数据:', docData);
  });
  // 后续可使用包含ID的myArray数组
});

优化：在服务层直接返回带ID的结果 #

如果希望订阅时直接拿到包含ID的数据，可在服务方法中通过pipe和map预处理结果：

getGalleryByPage(url: string) {
  return this.db.collection('content', ref => ref.where('slug', '==', url))
    .snapshotChanges()
    .pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as any; // 根据你的数据结构调整类型
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
}

订阅时即可直接获取带ID的数组：

this.getGalleryByPage(this.pageUrl).subscribe(items => {
  console.log('带ID的文档列表:', items);
  // 每个item都包含id字段和文档原有数据字段
});

说明：snapshotChanges()会返回包含文档元数据（如ID）和数据的快照，而valueChanges()默认仅返回文档数据，因此需要ID时优先使用snapshotChanges()。

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