Angular中基于指定字段查询Firebase集合并获取期望格式数据的方法

解决方案 #

你调用snapshotChanges()返回的结果本身包含了文档元数据、变更状态、快照对象等完整结构，不会直接返回文档的纯字段数据，你可以选择以下任意一种方案调整代码：

方案1：直接使用valueChanges()（无需额外处理，直接返回纯数据）

这个方法是AngularFire封装的专门用于获取集合内文档纯字段内容的API，调整后的代码如下：

getData(){
   const data$ = this.fbs.collection(
     this.trackerData,
     ref => ref.where('UserId','==',"WrKDk0XSNjU20FI0EVRvADzvNHz1")
   ).valueChanges().subscribe(res => {
     console.log(res);
   });
}

方案2：保留snapshotChanges()，手动提取数据（适合需要同时获取文档ID的场景）

如果后续需要用到文档的唯一ID，你可以继续使用snapshotChanges()，通过映射操作提取纯数据，需要先导入rxjs的map操作符：
import { map } from 'rxjs/operators';
调整后的代码如下：

getData(){
   const data$ = this.fbs.collection(
     this.trackerData,
     ref => ref.where('UserId','==',"WrKDk0XSNjU20FI0EVRvADzvNHz1")
   ).snapshotChanges()
   .pipe(
     map(actions => actions.map(item => {
       // 提取文档纯字段数据
       const data = item.payload.doc.data();
       // 提取文档ID（不需要可以去掉该行）
       const docId = item.payload.doc.id;
       return { docId, ...data };
     }))
   ).subscribe(res => {
     console.log(res);
   });
}

两种方案返回的结果都符合你需要的纯数据格式要求。

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