React Native中useEffect未清理引发Firebase监听内存泄漏及数据不更新问题

问题根因分析 #

• 内存泄漏警告：当前useEffect没有对Firebase的订阅做清理，异步回调执行时如果组件已经卸载，依然会触发状态更新。另外onAuthStateChanged调用后会返回取消订阅的方法，你没有在组件卸载时调用，导致订阅残留。
• 数据无法实时同步：你使用了get()方法获取用户文档，这是一次性查询接口，只会拉取调用瞬间的文档数据，不会监听后续的文档变更，自然需要刷新才能看到更新。

修复方案 #

步骤1：替换一次性查询为实时监听 #

把get()方法替换为onSnapshot()，开启Firestore文档的实时监听，只要文档数据变更就会触发回调更新本地状态。

步骤2：增加useEffect清理逻辑 #

• 保存onAuthStateChanged返回的取消订阅函数，同时保存onSnapshot返回的取消监听函数
• 声明挂载状态标记，避免组件卸载后执行状态更新
• 在useEffect的清理函数中调用所有取消订阅的方法，同时标记组件已卸载

修复后的完整代码如下：

useEffect(() => {
  // 标记组件是否已挂载
  let isMounted = true;
  // 保存Firestore实时监听的取消方法
  let unSubscribeFirestore = null;

  // 保存auth状态监听的取消方法
  const unSubscribeAuth = firebase.auth().onAuthStateChanged((user) => {
    // 如果之前已经有firestore监听，先取消旧的监听
    if (unSubscribeFirestore) unSubscribeFirestore();

    if (user !== null) {
      // 开启用户文档的实时监听
      unSubscribeFirestore = firebase
        .firestore()
        .collection("users")
        .doc(user.uid)
        .onSnapshot((documentSnapshot) => {
          // 只有组件还挂载的情况下才更新状态
          if (isMounted && documentSnapshot.exists) {
            setUserData(documentSnapshot.data());
            setisloadingComplet(true);
          }
        });
    }
  });

  // 清理函数，组件卸载时执行
  return () => {
    isMounted = false;
    unSubscribeAuth();
    if (unSubscribeFirestore) unSubscribeFirestore();
  };
}, []);

修复后效果：

• 切换用户时会自动取消前一个用户的文档监听，不会出现串数据的问题
• 所有异步回调执行前都判断了组件挂载状态，彻底避免内存泄漏警告
• 只要Firestore里的用户文档更新，本地状态会自动同步，无需手动刷新应用

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