Firestore缓存相关问题：验证数据来源、配置及子集合缓存支持

我在React应用中通过调用enableIndexedDbPersistence方法启用了Firestore缓存，初始化代码如下：

import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"
import { enableIndexedDbPersistence, getFirestore } from "firebase/firestore"

const firebaseConfig = {
  // config code
}

initializeApp(firebaseConfig)

const db = getFirestore()
enableIndexedDbPersistence(db) // enable cache

const auth = getAuth()

export { auth, db }

我想了解如何在以下useCollection代码中验证数据来自缓存而非服务器：

import { useEffect, useState } from "react"

import { collection, limit, onSnapshot, orderBy, query, where } from "firebase/firestore"

import { db } from "../firebase/config"

export const useCollection = (c) => {
  const [documents, setDocuments] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    let ref = collection(db, c)

    const unsubscribe = onSnapshot(ref, (snapshot) => {
      const results = []

      console.log(snapshot.metadata.fromCache ? "local data" : "server data")

      snapshot.docs.forEach(
        (doc) => {
          results.push({ ...doc.data(), id: doc.id })
        },
        (error) => {
          console.log(error)
          setError("could not fetch the data")
        }
      )

      setDocuments(results)
      setIsLoading(false)
      setError(null)
    })

    return () => unsubscribe()
  }, [])

  return { documents, error, isLoading }
}

此外还有两个问题：

1. 除了调用enableIndexedDbPersistence方法外，我还需要进行哪些操作才能正确配置缓存？
2. 该方法是否会缓存子集合文档？

一、验证数据来源（缓存/服务器） #

你当前代码里用snapshot.metadata.fromCache判断数据来源的逻辑是正确的，但需要修正错误处理的位置——forEach的第二个参数并不是错误回调，应该把错误处理放在onSnapshot的第二个参数中：

const unsubscribe = onSnapshot(ref, 
  (snapshot) => {
    const results = []
    // 打印并判断数据来源
    console.log(snapshot.metadata.fromCache ? "数据来自本地缓存" : "数据来自服务器")
    snapshot.docs.forEach(doc => {
      results.push({ ...doc.data(), id: doc.id })
    })
    setDocuments(results)
    setIsLoading(false)
    setError(null)
  },
  (error) => {
    console.error(error)
    setError("获取数据失败")
    setIsLoading(false)
  }
)

如果需要在UI上展示数据来源，还可以把snapshot.metadata.fromCache的状态存入组件state，比如新增isFromCache状态，再在页面上渲染对应的提示文本。

二、正确配置缓存的额外操作 #

除了调用enableIndexedDbPersistence(db)，还需要注意以下几点：

• 处理初始化错误：该方法可能抛出错误（比如浏览器不支持IndexedDB、存在同实例多标签页冲突等），需要用try/catch包裹处理：

  const db = getFirestore()
  // 放在异步函数或顶层await中执行
  async function initFirestoreCache() {
    try {
      await enableIndexedDbPersistence(db)
      console.log("缓存已成功启用")
    } catch (err) {
      if (err.code === 'failed-precondition') {
        console.error("多个标签页同时打开，缓存无法启用")
      } else if (err.code === 'unimplemented') {
        console.error("当前浏览器不支持IndexedDB")
      }
    }
  }
  initFirestoreCache()
  

• 控制查询数据源：默认情况下Firestore会优先尝试从服务器获取数据，离线时 fallback 到缓存。如果需要强制指定数据源，可以在查询时配置：

  // 强制从服务器获取（忽略缓存）
  getDocs(query(ref), { source: 'server' })
  // 强制从缓存获取（即使在线）
  getDocs(query(ref), { source: 'cache' })
  

• 缓存自动管理：Firestore客户端SDK会自动管理缓存大小和淘汰策略，无需手动配置，不过要注意：缓存仅保存客户端主动获取过的数据，未查询过的文档不会被缓存。

三、子集合文档的缓存情况 #

enableIndexedDbPersistence会缓存所有通过客户端SDK获取到的子集合文档。只要你通过collection(db, '父集合/父文档ID/子集合')或collection(docRef, '子集合')的方式查询过子集合数据，这些数据就会被自动缓存到IndexedDB中，缓存逻辑和顶级集合完全一致。

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