如何在React Native Expo应用中实现Firestore离线持久化？

你当前使用Firebase Web SDK的persistentLocalCache配置离线持久化，但React Native环境不支持IndexedDB，导致触发错误并回退到内存缓存，无法实现真正的离线数据持久化。以下是两种可行的解决方法：

方案一：使用React Native Firebase官方适配库（推荐） #

React Native Firebase专门为移动端优化，内置了对Android/iOS离线持久化的支持，无需依赖IndexedDB。

1. 安装依赖
   在项目根目录执行：

   npm install @react-native-firebase/app @react-native-firebase/firestore
   # 或使用yarn
   yarn add @react-native-firebase/app @react-native-firebase/firestore
   

2. 配置原生项目
   将google-services.json（Android）和GoogleService-Info.plist（iOS）放入对应原生目录，完成Firebase基础配置。

3. 修改Firebase初始化及数据获取代码
   替换原有的Firebase脚本为：

   import firestore from '@react-native-firebase/firestore';
   import { initializeApp } from '@react-native-firebase/app';
   
   const firebaseConfig = {
     // 你的Firebase配置信息
   };
   
   // 初始化Firebase app
   initializeApp(firebaseConfig);
   
   // 启用离线持久化
   firestore().enablePersistence()
     .catch((err) => {
       if (err.code === 'failed-precondition') {
         console.log('持久化失败：当前存在多个应用实例，无法启用');
       } else if (err.code === 'unimplemented') {
         console.log('当前环境不支持离线持久化');
       }
     });
   
   export async function getCollection(collectionName) {
     const querySnapshot = await firestore().collection(collectionName).get();
     return querySnapshot.docs.map(doc => doc.data());
   }
   

4. 组件代码无需修改
   原组件的getData函数可以直接复用，点击按钮后会自动使用缓存的离线数据（如果存在）。

方案二：调整Web SDK配置（不推荐） #

如果坚持使用Firebase Web SDK，由于React Native没有IndexedDB，需要放弃persistentLocalCache，改用内存缓存配合自定义持久化逻辑，但这种方式无法实现真正的离线持久化（应用重启后缓存会丢失），仅适用于临时场景：

修改Firebase初始化代码：

import { initializeApp } from "firebase/app";
import { collection, getDocs, initializeFirestore, memoryLocalCache } from "firebase/firestore";

const firebaseConfig = {
  // 你的Firebase配置信息
};

export const app = initializeApp(firebaseConfig);

// 使用内存缓存替代持久化缓存
const db = initializeFirestore(app, {
  localCache: memoryLocalCache()
});

export async function getCollection(collectionName) {
  const collectionRef = await getDocs(collection(db, collectionName))
  return collectionRef.docs.map(doc => doc.data());
}

关键说明 #

• React Native环境不支持Web标准的IndexedDB，因此Web SDK的persistentLocalCache无法生效，这是你收到警告的根本原因。
• React Native Firebase库通过移动端原生存储实现离线持久化，是目前最可靠的方案。

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