Angular/Firestore：获取单个文档并在视图模板中访问的方法

我太懂你卡了一周的憋屈了！Firestore返回的文档对象可不是咱们平时用的普通JS字面量，这就是为啥你只能用{{ invoice | json }}看到数据，却没法直接{{ invoice.id }}访问的核心原因。下面给你拆解几种常见场景的解决方案：

场景1：用原生Firebase SDK获取单个文档 #

如果你是直接用getDoc()方法拿数据，关键是要把Firestore返回的DocumentSnapshot对象转换成普通JS对象——因为docSnap本身包含了很多内部元数据，咱们要的字段都在data()方法里，还要手动把文档ID合并进去：

// 假设你用的是模块化SDK
import { doc, getDoc } from "firebase/firestore";

async fetchInvoice(invoiceId) {
  const docRef = doc(db, "invoices", invoiceId);
  const docSnap = await getDoc(docRef);
  
  if (docSnap.exists()) {
    // 重点！把ID和文档字段合并成普通对象
    this.invoice = { 
      id: docSnap.id, 
      ...docSnap.data() // 展开所有文档字段
    };
  } else {
    console.log("找不到对应的发票文档！");
  }
}

这样处理后，this.invoice就是一个纯纯的JS对象，模板里{{ invoice.id }}、{{ invoice.amount }}这类属性访问就完全正常了。

场景2：用AngularFire（Angular项目） #

如果是Angular项目用AngularFire库，那你大概率是订阅了文档的Observable，但没开启idField选项——默认情况下valueChanges()只返回文档字段，不包含ID，而且返回的是Immutable对象，模板没法直接解析：

import { AngularFirestore } from '@angular/fire/compat/firestore';

constructor(private afs: AngularFirestore) {}

// 获取发票Observable
getInvoice(invoiceId: string) {
  // 关键：添加idField选项，把文档ID注入到返回对象里
  this.invoice$ = this.afs.doc(`invoices/${invoiceId}`)
    .valueChanges({ idField: 'id' });
}

然后在模板里用async管道订阅（一定要用这个，不然拿不到实时数据）：

<div *ngIf="invoice$ | async as invoice">
  <h3>发票ID：{{ invoice.id }}</h3>
  <p>金额：{{ invoice.totalAmount }}</p>
  <p>状态：{{ invoice.status }}</p>
</div>

为啥之前的方法不行？ #

你之前尝试的四种方法没成功，大概率是没做这两步：

• 没有从DocumentSnapshot里提取data()的字段，直接把整个snap对象赋值给了invoice
• 没有把Firestore返回的特殊对象转换成普通JS对象（Firestore的文档对象有很多非枚举属性，模板无法识别）

用json管道能输出是因为它会递归遍历对象的所有属性，包括那些内部的，但模板的属性绑定只认枚举的普通属性。

内容的提问来源于stack exchange，提问作者nick.cook