如何在Angular中将Firestore collectionGroup数据转为Observable？

问题描述 #

根据Firestore官方文档的代码片段，尝试将一次性查询结果转换为Observable形式，但在组件订阅或使用async管道时无法获取结果，仅能通过console.log看到数据数组。

原官方代码：

import { collectionGroup, query, where, getDocs } from "firebase/firestore";

const museums = query(collectionGroup(db, 'landmarks'), where('type', '==', 'museum'));
const querySnapshot = await getDocs(museums);
querySnapshot.forEach((doc) => {
    console.log(doc.id, ' => ', doc.data());
});

改写后的代码：

const museums = query(
  collectionGroup(db, 'landmarks'),
  where('type', '==', 'museum')
);
const querySnapshot = await getDocs(museums);
const datas = querySnapshot.docs.map((doc) => {
  return doc.data() as Data;
});
console.log(datas);
return of(datas);

组件模板代码：

{{ museums_data$ | async }}

组件代码：

this.museums_data$.subscribe((datas) => console.log(datas));

问题原因 #

1. 使用await getDocs先获取数据再用of(datas)包装成Observable，会导致Observable在赋值给组件属性前就已经同步发出了数据，后续的订阅或async管道无法捕获到已发出的值。
2. 异步赋值时机问题：如果在async函数中先等待Promise完成再给museums_data$赋值，组件模板初始化时该属性可能还未被赋值，async管道初始检测不到数据。

解决方案 #

直接将Firestore的Promise查询转换为Observable流，利用RxJS的from操作符包装Promise，再通过map操作符处理数据：

代码示例 #

import { from } from 'rxjs';
import { map } from 'rxjs/operators';
import { collectionGroup, query, where, getDocs } from "firebase/firestore";

// 在组件类中声明Observable属性
museums_data$: Observable<Data[]>;

// 在初始化逻辑（如ngOnInit）中赋值
ngOnInit(): void {
  const museumsQuery = query(
    collectionGroup(db, 'landmarks'),
    where('type', '==', 'museum')
  );

  // 将Promise转换为Observable并处理数据
  this.museums_data$ = from(getDocs(museumsQuery)).pipe(
    map(querySnapshot => querySnapshot.docs.map(doc => doc.data() as Data))
  );
}

说明 #

• from(getDocs(museumsQuery))：将Firestore返回的Promise转换为Observable，当Promise resolve时，Observable会发出查询快照数据。
• map操作符：将查询快照转换为目标数据数组，保持响应式流的连贯性。
• 这种写法确保museums_data$在组件初始化时就被赋值为一个未完成的Observable，后续订阅或async管道能正常捕获到数据发出的时机。

额外检查点 #

• 确保组件中museums_data$的类型声明正确（Observable<Data[]>）。
• 模板中变量名与组件属性名完全一致，无拼写错误。

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