React useEffect调用async函数内Firebase v9 onSnapshot如何正确取消监听

核心矛盾说明 #

你的getChat是异步函数，返回的是包裹了unsubscribe方法的Promise，useEffect的清理函数执行时无法直接等待Promise resolve，也拿不到实际的取消监听方法，可通过以下方案解决：

方案1：useRef存储unsubscribe引用 + 挂载状态标记（改动最小，适合需要复用getChat方法的场景） #

完整修改后的代码如下：

import { useRef, useEffect } from 'react';
// 其他firebase相关导入省略

// 组件内部逻辑
const unsubscribeRef = useRef(null);

const getChat = async () => {
  const user = await getUserData();
  const collectionRef = collection(db, "messages");
  const q = query(
    collectionRef, 
    where("user_id", "==", user.id), 
    orderBy("createdAt")
  );
  const unsubscribe = onSnapshot(q, (snapshot) => {
    const data = snapshot.docs.map((doc) => ({
      id: doc.id,
      message: doc.data().message,
    }));
    setChatLines(data);
  });
  return unsubscribe;
};

useEffect(() => {
  let isMounted = true;
  // 调用异步方法获取取消监听函数
  getChat()
    .then((unsubscribe) => {
      // 组件仍挂载则存储unsubscribe引用，否则直接取消监听避免内存泄漏
      if (isMounted) {
        unsubscribeRef.current = unsubscribe;
      } else {
        unsubscribe();
      }
    })
    .catch((err) => {
      // 可自行处理getUserData或者查询初始化的报错
      console.error('初始化聊天监听失败:', err);
    });
  // 清理函数
  return () => {
    isMounted = false;
    if (unsubscribeRef.current) {
      unsubscribeRef.current();
    }
  };
}, []);

逻辑说明

• 用useRef存储unsubscribe方法的引用，ref的修改和读取不受渲染周期影响，异步逻辑resolve后可以随时把取消方法存进去
• 加isMounted标记避免组件在getUserData还没返回时就卸载，后续拿到unsubscribe方法后没有地方存储导致的监听泄漏
• 清理函数执行时只要ref里有值就直接调用，不管监听有没有初始化完成，都不会漏清理

方案2：useEffect内部封装自执行异步函数（适合不需要复用getChat方法的场景） #

不需要单独维护ref，直接把逻辑写在useEffect内部即可：

useEffect(() => {
  let unsubscribe = null;
  let isMounted = true;
  // 内部自执行异步函数
  (async () => {
    try {
      const user = await getUserData();
      // 组件已卸载则直接终止后续逻辑
      if (!isMounted) return;
      const collectionRef = collection(db, "messages");
      const q = query(
        collectionRef, 
        where("user_id", "==", user.id), 
        orderBy("createdAt")
      );
      unsubscribe = onSnapshot(q, (snapshot) => {
        const data = snapshot.docs.map((doc) => ({
          id: doc.id,
          message: doc.data().message,
        }));
        setChatLines(data);
      });
    } catch (err) {
      console.error('初始化聊天监听失败:', err);
    }
  })();
  return () => {
    isMounted = false;
    if (unsubscribe) unsubscribe();
  };
}, []);

补充注意事项 #

如果你的用户登录状态可能变化，建议把user.id放到useEffect的依赖数组里，用户切换的时候自动销毁旧的监听，初始化新的监听，避免拿到不属于当前用户的消息。

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