Angular项目中Firebase购物车如何关联获取Products文档数据？

当你在Firebase中使用文档引用字段时，DocumentReference本身只是指向目标文档的指针，不会自动加载关联的文档数据，你需要主动调用get()方法来获取引用对应的产品详情。结合Angular和RxJS，这里有两种可行的实现方式：

方式一：使用Promise.all处理异步请求 #

myArray2: Cart[] = [];

async getData2() {
  const cartCollection = this.angularFirestore.collection('carts');
  const cartSnapshot = await cartCollection.get().toPromise();
  
  const cartPromises = cartSnapshot.docs.map(async (doc) => {
    const cartData = doc.data() as { product: firebase.firestore.DocumentReference; quantity: number };
    // 获取关联的产品文档
    const productSnapshot = await cartData.product.get();
    const productData = productSnapshot.data() as Product;
    
    // 组装成Cart实例
    return new Cart(
      // 可根据需求替换为自定义id，这里用文档id示例
      parseInt(doc.id, 10), 
      new Product(
        productData.id,
        productData.imgSrc,
        productData.name,
        productData.price,
        productData.category,
        productData.description
      ),
      cartData.quantity
    );
  });
  
  this.myArray2 = await Promise.all(cartPromises);
  return this.myArray2;
}

方式二：使用RxJS的forkJoin（贴合Angular响应式风格） #

如果你更习惯用RxJS处理异步逻辑，可以这样实现：

import { forkJoin, switchMap } from 'rxjs';
import { map } from 'rxjs/operators';

myArray2: Cart[] = [];

getData2() {
  this.angularFirestore.collection('carts').get().pipe(
    map(cartSnapshot => {
      return cartSnapshot.docs.map(doc => {
        const cartData = doc.data() as { product: firebase.firestore.DocumentReference; quantity: number };
        // 将产品引用的查询转为Observable
        const product$ = this.angularFirestore.doc(cartData.product.path).get();
        
        return product$.pipe(
          map(productSnapshot => {
            const productData = productSnapshot.data() as Product;
            return new Cart(
              parseInt(doc.id, 10),
              new Product(
                productData.id,
                productData.imgSrc,
                productData.name,
                productData.price,
                productData.category,
                productData.description
              ),
              cartData.quantity
            );
          })
        );
      });
    }),
    switchMap(cartObservables => forkJoin(cartObservables))
  ).subscribe(carts => {
    this.myArray2 = carts;
    // 可在此处处理视图渲染等后续逻辑
  });
}

关键说明 #

1. 类型转换：通过as关键字将Firebase返回的匿名对象转换为你定义的Product和购物车数据类型，保证代码的类型安全。
2. 异步处理：无论是Promise还是RxJS，都必须处理get()方法的异步特性，避免直接返回未填充数据的空数组。
3. ID适配：示例中用Firebase文档的doc.id作为Cart的id，如果你有自定义的id字段，直接替换为对应字段值即可。

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