Ionic 7 + Firebase 9.22 获取Firestore完整集合的正确语法咨询

场景与现有代码 #

我在Firestore中存储了包含标题、缩略图URL的资源列表，当前基于Ionic 7和Firebase 9.22开发，已有如下更新数据的代码：

import { Firestore, collection, collectionData, doc, docData, addDoc, deleteDoc, setDoc, updateDoc, getDocs } from '@angular/fire/firestore';

async updateUser(uid: string, payload: any) {
  const userDocRef = doc(this.firestore, 'users/' + uid );
  return setDoc(userDocRef, payload, { merge: true });
}

需求 #

需要获取名为resources的完整集合数据，填充页面中<ion-list>绑定的resources数组，页面代码如下：

<ion-list *ngFor="let resource of resources">
  <ion-item (click)="openResource(resource.url)">
    <ion-thumbnail slot="start">
      <img [src]="resource.image" />
    </ion-thumbnail>
    <ion-label>{{resource.text}}</ion-label>
  </ion-item>
</ion-list>

遇到的问题 #

参考示例代码尝试实现时，发现collection对象无法调用.get()方法，错误的尝试代码如下：

const citiesRef = collection(this.firestore, 'cities');
const snapshot = await citiesRef.get();
snapshot.forEach((doc:any) => {
  console.log(doc.id, '=>', doc.data());
});

解决方案 #

Firebase 9采用模块化API设计，collection对象本身没有.get()方法，需使用你已导入的getDocs()方法来获取集合快照。

方式1：一次性获取集合数据 #

在组件中定义数组并实现获取方法：

import { Component, OnInit } from '@angular/core';
import { Firestore, collection, getDocs } from '@angular/fire/firestore';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  resources: any[] = [];

  constructor(private firestore: Firestore) {}

  ngOnInit() {
    this.getResources();
  }

  async getResources() {
    const resourcesRef = collection(this.firestore, 'resources');
    const snapshot = await getDocs(resourcesRef);
    // 将文档ID和数据合并后赋值给数组
    this.resources = snapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
  }
}

方式2：实时监听集合变化（推荐用于需自动同步数据的场景） #

利用collectionData()方法创建Observable，配合异步管道自动处理订阅/取消订阅：

import { Component, OnInit } from '@angular/core';
import { Firestore, collection, collectionData } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  resources$: Observable<any[]>;

  constructor(private firestore: Firestore) {}

  ngOnInit() {
    const resourcesRef = collection(this.firestore, 'resources');
    // 配置idField将文档ID加入返回数据
    this.resources$ = collectionData(resourcesRef, { idField: 'id' });
  }
}

对应的HTML修改为：

<ion-list *ngFor="let resource of resources$ | async">
  <ion-item (click)="openResource(resource.url)">
    <ion-thumbnail slot="start">
      <img [src]="resource.image" />
    </ion-thumbnail>
    <ion-label>{{resource.text}}</ion-label>
  </ion-item>
</ion-list>

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