升级Firebase9+@angular/fire7后如何返回Observable无需修改组件代码

完全兼容原有实时更新行为的最优方案 #

原有snapshotChanges默认支持实时监听数据变化，要完全对齐原有行为，直接用Observable封装Firebase 9的onSnapshot原生监听方法即可，仅修改服务层代码，组件层无需任何调整：

1. 导入所需依赖

import { Observable } from 'rxjs';
import { doc, onSnapshot, DocumentSnapshot } from 'firebase/firestore';
// 此处db为你项目中已初始化完成的Firestore实例，无需额外修改

2. 调整服务层方法

getUserEventSummary(userId): Observable<any> {
  return new Observable(subscriber => {
    const docRef = doc(db, `user/${userId}/event_summary`, 'current');
    // 注册实时快照监听，和原有snapshotChanges逻辑完全对齐
    const unsubscribe = onSnapshot(docRef, 
      (snapshot: DocumentSnapshot) => subscriber.next(snapshot.data()),
      (error) => subscriber.error(error)
    );
    // 订阅取消时自动销毁监听器，避免内存泄漏
    return () => unsubscribe();
  });
}

仅单次获取数据的简化方案 #

如果你的业务场景本身不需要实时数据更新，仅需要单次拉取数据，可以直接用RxJS的from方法把getDoc返回的Promise转为Observable：

1. 导入所需依赖

import { from } from 'rxjs';
import { map } from 'rxjs/operators';
import { getDoc, doc } from 'firebase/firestore';

2. 调整服务层方法

getUserEventSummary(userId): Observable<any> {
  return from(getDoc(doc(db, `user/${userId}/event_summary`, 'current'))).pipe(
    map(snapshot => snapshot.data())
  );
}

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