如何降低Firestore的文档读取次数，减少不必要的读取计费开销？

以下方案均适配你当前的使用场景，可根据实际需求选择：

1. 开启Firestore本地持久化缓存（优先推荐） #

Firestore Web SDK自带离线持久化能力，开启后查询过的文档会自动存储在浏览器本地，后续相同查询优先命中缓存，仅缓存不存在/数据有变更时才会触发服务端读取，产生费用。
开启方式：在Firebase初始化逻辑中添加以下代码

firebase.firestore().enablePersistence()
  .catch((err) => {
    if (err.code == 'failed-precondition') {
      // 多标签页同时打开时可能触发，不影响单页使用
    } else if (err.code == 'unimplemented') {
      // 浏览器不支持时降级走默认查询逻辑即可
    }
  });

你的查询代码可新增缓存优先规则，无特殊情况完全不触发服务端读取：

// 全量查询改法
firebase
.firestore()
.collection("products")
// 指定仅从缓存拉取
.get({ source: 'cache' })
.then((snapshot) => {
  // 缓存为空时再走服务端拉取
  if (snapshot.empty) {
    return firebase.firestore().collection("products").get()
  }
  return snapshot
})
.then((snapshot) => {
  snapshot.forEach((doc) => {
    // 原有业务逻辑
  })
})

// 单条条件查询改法同理
firebase
.firestore()
.collection("products")
.where("prodID", "==", prodID)
.get({ source: 'cache' })
.then((snapshot) => {
  if (snapshot.empty) {
    return firebase.firestore().collection("products").where("prodID", "==", prodID).get()
  }
  return snapshot
})
.then((snapshot) => {
  snapshot.forEach((doc) => {
    // 原有业务逻辑
  })
})

注：你原有代码漏写了.get()方法，补上后才能正常触发查询。

2. 自定义前端缓存 #

你也可以手动将拉取到的产品数据存在前端全局状态（如Pinia、Redux）、localStorage/sessionStorage中，页面刷新/跳转时优先读取本地缓存，设置自定义过期时间即可控制服务端拉取频率。示例逻辑：

// 读本地缓存
const cachedProducts = localStorage.getItem('productsCache')
const cacheExpireTime = localStorage.getItem('productsCacheExpire')
let productsData
if (cachedProducts && Date.now() < Number(cacheExpireTime)) {
  // 缓存未过期直接用
  productsData = JSON.parse(cachedProducts)
} else {
  // 缓存过期拉取服务端数据
  productsData = await firebase.firestore().collection("products").get().then(snapshot => {
    const res = snapshot.docs.map(doc => doc.data())
    // 写入缓存，设置24小时过期
    localStorage.setItem('productsCache', JSON.stringify(res))
    localStorage.setItem('productsCacheExpire', String(Date.now() + 24 * 60 * 60 * 1000))
    return res
  })
}

该方案下可灵活控制拉取频率，比如设置7天过期的话一周仅产生一次全量读取费用。

3. 静态化托管（零读取费用方案） #

如果你的产品数据更新频率极低（几天/几周才更新一次），可直接将数据导出为静态JSON文件，和你的Web应用资源一起托管，前端直接请求静态JSON文件，完全不走Firestore查询，不会产生任何读取费用。数据更新时替换静态JSON即可，也可写简单的云函数触发自动更新。

以上方案都需要根据你的数据更新频率调整缓存过期规则，平衡费用和数据一致性即可，对小型应用来说完全够用。

内容的提问来源于stack exchange，提问作者Chan Wei Jie