Angular15结合@angular/fire，如何处理FireAuth用户Observable依赖？

在Angular结合AngularFire的场景中，要确保Firestore操作在用户身份验证完成后执行，核心是利用RxJS的switchMap操作符将用户流与数据库操作流串联，同时处理用户未登录的边界情况。

修正后的getAll方法实现 #

import { Observable, empty } from 'rxjs';
import { switchMap } from 'rxjs/operators';
// 保留原有的import内容

export class DummyDataService {
  userObservable: Observable<User | null>;
  
  constructor(
    private fs: Firestore,
    private _auth: AuthService
  ) {
    this.userObservable = this._auth.currentUser$;
  }
  
  getAll(): Observable<any[]> {
    return this.userObservable.pipe(
      switchMap(user => {
        // 处理用户未登录或无custom_data的情况
        if (!user || !user.custom_data) {
          // 返回空流，也可根据需求抛出错误或返回默认数据
          return empty();
        }
        // 用户信息就绪后，创建集合引用并返回数据Observable
        const coll = collection(this.fs, `/${user.custom_data}/dummydata`);
        return collectionData(coll, { idField: 'id' });
      })
    );
  }
}

关键逻辑说明 #

• switchMap的作用：它会订阅userObservable，每当用户状态变化（登录/登出）时，自动取消之前的Firestore请求（若存在），并根据最新用户信息发起新请求，避免无效数据库操作。
• 边界情况处理：当user为null或custom_data缺失时，返回empty()流，你也可以替换为throwError('用户未登录')或默认数组，保证组件订阅时不会出现意外报错。
• 自动响应状态变化：最终返回的Observable会自动监听用户状态，一旦用户登录并获取到custom_data，就会自动触发Firestore数据获取，无需手动调用。

扩展优化建议 #

可以将用户流的处理逻辑封装为私有方法，方便在多个Firestore操作中复用：

private withUser<T>(action: (user: User) => Observable<T>): Observable<T> {
  return this.userObservable.pipe(
    switchMap(user => {
      if (!user) return empty();
      return action(user);
    })
  );
}

// 复用示例
getAll(): Observable<any[]> {
  return this.withUser(user => {
    const coll = collection(this.fs, `/${user.custom_data}/dummydata`);
    return collectionData(coll, { idField: 'id' });
  });
}

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