React Native Expo离线修改数据后关闭应用，Firestore同步失败

使用React Native Expo结合Firestore（版本^9.18.0）开发时遇到异常：Android和Apple平台默认启用离线持久化，应用在前台时离线修改数据，联网后能正常同步；但离线修改后关闭应用，再联网打开，之前的离线修改完全丢失，未同步到Firestore。

现有代码配置 #

Firestore初始化代码 #

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "MY.APIKEY",
  authDomain: "MY.DOMAIN",
  projectId: "MY.PROJECT",
  storageBucket: "MY.STORAGE",
  messagingSenderId: "MY.MESSAGIN",
  appId: "MY.APPID",
};

const app = initializeApp(firebaseConfig);
const database = getFirestore(app);

export { database };

数据写入代码 #

import { arrayUnion, arrayRemove, doc, updateDoc } from "firebase/firestore";
import { database } from "../database/firebase";

const onSubmitEdit = async (data) => {
  const userRef = doc(database, "users", email);
  await updateDoc(userRef, { groups: arrayUnion(data) });
  await updateDoc(userRef, { groups: arrayRemove(route.params.item) });
};

const onSubmitCreate = async (data) => {
  const userRef = doc(database, "users", email);
  await updateDoc(userRef, { groups: arrayUnion(data) });
};

数据监听代码 #

import { doc, onSnapshot } from "firebase/firestore";
import { database } from "../database/firebase";

const session = useSelector((state) => state.session);
const activeGroup = useSelector((state) => state.activeGroup);

useEffect(() => {
  if (session) {
    const snap = onSnapshot(
      doc(database, "users", email),
      { includeMetadataChanges: true },
      async (doc) => {
        /* TASKS */
      }
    );
    return () => {
      snap();
    };
  }
}, [activeGroup.active, session]);

已尝试移除includeMetadataChanges、取消useEffect依赖限制等操作，问题未解决。

解决方案建议 #

1. 将多次updateDoc合并为批量操作 #

当前onSubmitEdit中连续调用两次updateDoc，离线时这两个操作是独立的，可能在应用关闭时其中一个未完成持久化。改用批量操作确保原子性：

import { writeBatch, doc } from "firebase/firestore";

const onSubmitEdit = async (data) => {
  const batch = writeBatch(database);
  const userRef = doc(database, "users", email);
  
  batch.update(userRef, { groups: arrayUnion(data) });
  batch.update(userRef, { groups: arrayRemove(route.params.item) });
  
  await batch.commit();
};

2. 手动显式启用离线持久化并验证初始化时机 #

虽然官方说明默认启用，但显式调用enablePersistence并处理初始化错误，确保持久化正常启动：

// 在Firestore初始化文件中修改
import { initializeApp } from "firebase/app";
import { getFirestore, enablePersistence } from "firebase/firestore";

const firebaseConfig = { /* ... */ };

const app = initializeApp(firebaseConfig);
const database = getFirestore(app);

// 显式启用持久化
enablePersistence(database)
  .catch((err) => {
    if (err.code === 'failed-precondition') {
      console.error("持久化失败：多标签页冲突");
    } else if (err.code === 'unimplemented') {
      console.error("持久化失败：当前环境不支持");
    }
  });

export { database };

3. 处理应用后台切换时的挂起写入 #

React Native应用切换到后台时，确保Firestore有足够时间将离线写入持久化到本地存储：

import { AppState } from 'react-native';

useEffect(() => {
  const handleAppStateChange = async (nextAppState) => {
    if (nextAppState === 'background') {
      // 等待所有挂起的写入操作完成
      await database.waitForPendingWrites();
    }
  };

  const subscription = AppState.addEventListener('change', handleAppStateChange);
  return () => subscription.remove();
}, []);

4. 验证离线写入的本地持久化状态 #

在写入后通过文档元数据验证是否成功写入本地缓存，确认操作被持久化：

import { getDoc } from "firebase/firestore";

const onSubmitCreate = async (data) => {
  const userRef = doc(database, "users", email);
  await updateDoc(userRef, { groups: arrayUnion(data) });
  
  // 验证写入是否已缓存到本地
  const snapshot = await getDoc(userRef);
  console.log("写入是否存储到本地缓存：", snapshot.metadata.fromCache);
};

5. 升级Firestore版本 #

Firestore 9.x部分版本在React Native环境下存在离线持久化bug，尝试升级到最新稳定版（如^9.23.0），查看是否修复相关问题。

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