React应用使用Firebase 10.5.0无法从Firestore缓存读取数据

你的问题源于两个核心问题：Firestore初始化配置错误，以及数据读取逻辑的缺陷，导致缓存始终无法被正确填充和读取。

1. Firestore初始化配置错误 #

你将缓存相关参数（localCache、cacheSizeBytes）传给了initializeApp，但这些属于Firestore的专属配置项，必须传递给getFirestore函数，而非Firebase应用初始化函数。

修正后的initfirebase.js #

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { 
  getFirestore,
  persistentLocalCache,
  persistentMultipleTabManager,
  CACHE_SIZE_UNLIMITED
} from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const initapp = initializeApp(firebaseConfig);

// 正确将缓存配置绑定到Firestore实例
export const db = getFirestore(initapp, { 
  localCache: persistentLocalCache({tabManager: persistentMultipleTabManager()}), 
  cacheSizeBytes: CACHE_SIZE_UNLIMITED
});

export const auth = getAuth(initapp);
export const storage = getStorage(initapp);

2. 数据读取逻辑缺陷 #

当前代码仅在getDocsFromCache成功返回空结果时，才会从服务器拉取数据。但首次加载时，缓存中根本不存在该查询的结果，getDocsFromCache会直接抛出异常进入catch块，而你在catch块中仅打印日志，未触发服务器读取逻辑，导致缓存永远无法被填充。

修正后的Itemlist.js读取逻辑 #

import React, { useEffect } from 'react'
import { db } from "../../firebase/initfirebase";
import {
  collection,
  query,
  where,
  getDocsFromCache,
  getDocsFromServer,
} from "firebase/firestore";

export default function Itemlist() {
  const brandname = ["Apple", "Sony", "Lenovo", "Dell", "HP", "Samsung", "Medion", "Asus"];

  useEffect(() => {
    const readdb = async () => {
      const q = query(
        collection(db, "items"),
        where('brand', 'in', brandname),
      );

      try {
        // 优先尝试从缓存读取
        const querySnapshot = await getDocsFromCache(q);
        console.log("从缓存获取数据:", querySnapshot);
        // 此处添加缓存数据的渲染逻辑
      } catch (cacheErr) {
        console.log("缓存无数据，切换到服务器读取:", cacheErr);
        try {
          // 缓存读取失败时，从服务器拉取数据
          const querySnapshot = await getDocsFromServer(q);
          console.log("从服务器获取数据:", querySnapshot);
          // Firestore会自动将本次服务器返回的结果存入持久化缓存
          // 下次页面加载时即可直接从缓存读取
        } catch (serverErr) {
          console.log("服务器读取失败:", serverErr);
        }
      }
    };

    readdb();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return(
    <div> Testing </div>
  )
}

额外验证点 #

• 确保浏览器允许使用IndexedDB（Firestore持久化缓存依赖该特性，隐私模式下可能被禁用）
• 确认Firestore安全规则允许读取items集合
• 保证每次发起的查询完全一致（集合路径、筛选条件等无变化），否则Firestore会视为新查询，无法命中缓存

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