如何在AngularFire中等待Firebase数据返回后调用后续函数

你当前用setTimeout硬编码等待时间的写法完全不可靠：网络差时1.5秒内数据未返回，this.myData会是undefined导致后续函数执行出错；网络状况好时又会产生不必要的等待。本质问题是你把依赖异步数据的逻辑写在了订阅回调的外部，Observable的订阅回调只会在Firebase返回数据后触发，外部代码不会等待异步请求完成。

根据你的业务场景选对应写法即可：

场景1：仅需单次读取文档数据，不需要监听后续变更 #

这种场景不要用valueChanges()——它会持续推送文档的实时变更，用完不手动取消订阅会造成内存泄漏。直接用get()方法单次拉取数据即可，可以配合async/await写线性逻辑：

async loadMyData() {
  // 会阻塞在这里直到数据返回
  const docSnapshot = await this.db.collection('myCollection').doc('myDoc').get().toPromise();
  this.myData = docSnapshot.data();
  // 数据拿到后直接执行后续逻辑
  this.myFunction(this.myData);
}

如果你用的是RxJS 7及以上版本，toPromise()已被标记弃用，可以替换为firstValueFrom：

import { firstValueFrom } from 'rxjs';

async loadMyData() {
  const docSnapshot = await firstValueFrom(this.db.collection('myCollection').doc('myDoc').get());
  this.myData = docSnapshot.data();
  this.myFunction(this.myData);
}

场景2：需要监听文档实时变更，每次数据更新都要重新执行逻辑 #

这种场景才需要用valueChanges()，直接把后续逻辑写在subscribe的回调内部即可，数据首次返回、后续发生变更时都会自动执行逻辑，不需要手动加延迟：

loadAndWatchMyData() {
  this.db.collection('myCollection').doc('myDoc').valueChanges()
    .subscribe(res => {
      this.myData = res;
      // 数据就绪/更新后直接调用
      this.myFunction(this.myData);
    })
}

注意：这种持续订阅的写法一定要在组件销毁时取消订阅，避免内存泄漏，推荐用takeUntil操作符配合销毁钩子实现自动取消：

import { Subject, takeUntil } from 'rxjs';

// 组件内声明销毁主题
private destroy$ = new Subject<void>();

ngOnInit() {
  this.db.collection('myCollection').doc('myDoc').valueChanges()
    .pipe(takeUntil(this.destroy$))
    .subscribe(res => {
      this.myData = res;
      this.myFunction(this.myData);
    })
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

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