angulfirestore查询返回undefined怎么办？如何遍历查询结果

一、返回undefined的排查与解决 #

• 修正拼写错误：代码里的angulfirestore是拼写错误，正确应为angularFirestore（注意以Angular开头）；同时确认集合名xxx、字段名yyy和Firestore后台的名称完全一致（Firestore区分大小写）。
• 处理异步时机问题：valueChanges()是异步操作，若在subscribe代码块外部直接访问this.event，此时数据还未返回，必然是undefined。必须在subscribe的回调函数内部处理数据，或使用async/await结合firstValueFrom转为同步写法。
• 检查数据与权限：
  • 确认Firestore中是否存在符合yyy == zzz条件的文档，若没有，data会是空数组而非undefined，需调整后续逻辑的判断方式。
  • 检查Firestore安全规则，确保当前用户有读取xxx集合的权限，权限不足会导致数据无法返回，可临时将规则设为allow read, write: if true;测试（上线前务必改回安全规则）。

二、查询结果的forEach遍历方法 #

在subscribe的成功回调中直接对返回的数组执行forEach即可，修正后的示例代码如下：

this.angularFirestore.collection('xxx', ref => ref.where('yyy', '==', 'zzz'))
  .valueChanges()
  .subscribe(
    data => {
      this.event = data;
      // 执行forEach遍历
      this.event.forEach(item => {
        // 写入每个数据项的处理逻辑
        console.log('当前数据项:', item);
      });
    },
    err => console.log(err)
  );

如果需要在组件模板中遍历，可使用Angular的*ngFor指令：

<div *ngFor="let item of event">
  {{ item | json }}
</div>

内容的提问来源于stack exchange，提问作者Zé-da-Véstia Lidia