Angular中如何同步获取Firestore数据？控制台输出undefined求解

你遇到的问题核心是Firestore的get()操作是异步的，subscribe回调外的console.log会在数据返回前就执行，所以打印出undefined。而且你给subscribe回调加async/await完全没用，因为doc.data()本身是同步方法，不是Promise，await在这里起不到任何作用。

下面给你两种可行的解决思路：

方法一：转成Promise用async/await处理 #

把Firestore返回的Observable转成Promise，在async函数里等待数据返回后再操作：

async fetchAnswer() {
  const docSnapshot = await this.firestore.collection('list').doc('1').get().toPromise();
  this.myAns = docSnapshot.data()?.answer || "no answer";
  console.log('this.myAns', this.myAns);
  // 所有需要用到this.myAns的逻辑都可以放在这里，或者调用其他方法传入数据
}

// 在组件初始化或需要的地方调用
this.fetchAnswer();

方法二：用RxJS管道+模板async管道（更符合Angular风格） #

直接把数据处理成Observable，在模板里用async管道自动订阅，避免手动处理异步：

// 定义成Observable类型
myAns$: Observable<string>;

// 在初始化时赋值
ngOnInit() {
  this.myAns$ = this.firestore.collection('list').doc('1').get().pipe(
    map(doc => doc.data()?.answer || "no answer")
  );
}

模板中使用：

<p>答案：{{ myAns$ | async }}</p>

这种方式不需要手动管理订阅，Angular会自动处理，还能避免内存泄漏。

另外要注意：你之前尝试的async/await加在subscribe回调里完全是多余的，因为doc已经是异步操作完成后拿到的结果，doc.data()是同步读取数据的方法，根本不需要await。

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