Angular 5+FireStore：Observable转数组及数据缓存实现方案

我来帮你搞定这个Firestore读取配额超标的麻烦——核心方案就是第一次请求后缓存数据，后续调用直接返回缓存结果，彻底避免不必要的Firestore读取请求。下面是具体的代码修改步骤：

修改ProductService服务 #

我们需要在服务里添加缓存逻辑，把原来的Observable声明替换成实际的产品数组缓存，同时保持方法返回Observable的兼容性（这样组件代码不用改动）。

修改后的product.service.ts代码如下：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { Product } from './path-to-your-product-model'; // 替换成你的Product模型实际路径

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  // 私有变量存储缓存的产品数组，初始为null表示数据未加载
  private cachedProducts: Product[] | null = null;

  constructor(private afs: AngularFirestore) { }

  getProductsAll(): Observable<Product[]> {
    // 优先返回缓存数据（用of转成Observable保持接口一致性）
    if (this.cachedProducts) {
      return of(this.cachedProducts);
    }

    // 缓存为空时，从Firestore拉取数据并写入缓存
    return this.afs.collection('products', ref => ref.orderBy('published', 'desc'))
      .snapshotChanges()
      .pipe(
        map(actions => {
          // 转换Firestore返回的数据格式（保留文档ID）
          return actions.map(a => {
            const id = a.payload.doc.id;
            const data = a.payload.doc.data() as Product;
            return { id, ...data };
          });
        }),
        // 将获取到的数据存入缓存，供后续调用直接使用
        map(products => {
          this.cachedProducts = products;
          return products;
        })
      );
  }

  // 可选：添加清空缓存的方法，用于需要手动刷新数据的场景
  clearProductsCache(): void {
    this.cachedProducts = null;
  }
}

关键逻辑说明： #

• 缓存变量：cachedProducts用来存储已获取的产品数组，初始值null标记数据未加载状态。
• 缓存判断：每次调用getProductsAll时，先检查缓存是否存在，存在则直接返回包装成Observable的缓存数据（保证和原方法返回类型一致）。
• 缓存写入：第一次从Firestore获取数据后，通过pipe里的第二个map操作符把数据存入缓存，后续调用就不会再触发Firestore的读取请求。

组件代码无需修改 #

你的products.component.ts代码完全不需要变动，因为getProductsAll仍然返回Observable，subscribe的逻辑和原来完全一致：

// products.component.ts 保持原样即可
items: any;
ngOnInit(): void {
  this.productService.getProductsAll()
    .subscribe( products => {
      this.items = products;
    })
}

可选：手动刷新缓存 #

如果你的场景需要偶尔刷新数据（比如后台更新了产品），可以调用clearProductsCache()方法清空缓存，下一次调用getProductsAll就会重新从Firestore拉取最新数据并更新缓存。

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