Firebase 9.0模块化版本开发电商站点Firestore快照监听异常求助

问题排查 #

你遇到的问题主要有3个核心错误：

• 第一个版本的useEffect中，卸载监听的清理函数放错了位置：你把return () => unsubscribeFromAuth()写在了onAuthStateChanged的回调内部，而不是useEffect回调的返回值，导致auth状态监听没有被正确卸载，重复触发监听逻辑。
• 第二个版本的useEffect没有传入空依赖数组，会导致每次组件渲染都重新注册一次auth监听，最终引发内存泄漏和逻辑重复执行。
• Firebase V9模块化API中，onAuthStateChanged是从firebase/auth包导入的顶层函数，不是auth实例的方法，你第二个版本写的auth.onAuthStateChanged是旧版命名空间API的写法，和你使用的V9模块化API不兼容。
  另外你没有清理onSnapshot的监听器，用户退出登录后这个监听器还会运行，也会引发报错和内存泄漏。

修正后的代码 #

首先确认你在firebase.utils文件中正确导出了auth、createUserProfileDocument，然后将App.js的useEffect修改为：

import { onAuthStateChanged } from "firebase/auth";
import { onSnapshot } from "firebase/firestore";
import { auth, createUserProfileDocument } from '你的firebase.utils文件路径';

// ...组件内代码
const [currentUser, setCurrentUser] = useState(null);

useEffect(() => {
  let unsubscribeFromAuth = null;
  let unsubscribeFromSnapshot = null;

  unsubscribeFromAuth = onAuthStateChanged(auth, async (userAuth) => {
    if (userAuth) {
      const userRef = await createUserProfileDocument(userAuth);
      // 保存快照监听的卸载函数
      unsubscribeFromSnapshot = onSnapshot(userRef, (docSnap) => {
        setCurrentUser({
          id: docSnap.id,
          ...docSnap.data()
        }); 
      })
    } else {
      setCurrentUser(null);
      // 用户退出时卸载快照监听
      if (unsubscribeFromSnapshot) unsubscribeFromSnapshot();
    }
  })

  // 清理函数放在useEffect回调的末尾，作为useEffect的返回值
  return () => {
    unsubscribeFromAuth();
    if (unsubscribeFromSnapshot) unsubscribeFromSnapshot();
  }
}, []);

额外优化建议 #

• 你之前的createUserProfileDocument函数里有拼写错误，参数aditionalData应该是additionalData，之前注释了展开逻辑，后续启用的时候注意修正拼写。
• 调用onSnapshot的时候可以加错误捕获，避免数据库权限变更等异常导致页面崩溃：

onSnapshot(userRef, (docSnap) => {
  setCurrentUser({
    id: docSnap.id,
    ...docSnap.data()
  }); 
}, (error) => {
  console.log('监听用户数据失败：', error.message);
})

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