如何清理Firestore快照及在React useEffect中正确使用onSnapshot监听器

首先纠正两个基础错误：

1. 你的useEffect依赖数组错误填写了buds，会导致「拉取数据→更新buds→触发effect重新执行→再次拉取数据」的死循环，依赖应该仅填写user.uid，仅当用户ID变化时才重新拉取数据。
2. onSnapshot不是异步方法，不需要加await，它会同步返回清理监听的函数，你之前的写法无法把清理函数暴露给组件调用。

方案1：一次性拉取数据（原.get()版本） #

.get()是单次请求，清理仅需要避免组件卸载后仍执行状态更新即可，修改如下：

API层修改 #

getBuds: async (uid, abortSignal) => {
  try {
    const snapshot = await db
      .collection('users')
      .doc(uid)
      .collection('buds')
      .get({ signal: abortSignal });
    return snapshot.docs.map((doc) => doc.data());
  } catch (error) {
    console.log('Error @getBuds ', error);
    throw error;
  }
},

组件useEffect写法 #

useEffect(() => {
  const abortController = new AbortController();
  let isMounted = true;

  const fetchBuds = async () => {
    try {
      const res = await firebase.getBuds(user.uid, abortController.signal);
      if (isMounted) setBuds(res);
    } catch (err) {
      // 忽略主动取消的请求报错
      if (err.name !== 'AbortError') console.log(err);
    }
  };
  fetchBuds();

  // 清理逻辑
  return () => {
    isMounted = false;
    abortController.abort();
  };
}, [user.uid]);

方案2：实时监听数据（onSnapshot版本） #

onSnapshot的核心是返回取消监听的函数，你需要把这个函数暴露给组件，在effect的清理阶段调用即可。

API层修改 #

不要在API层处理数据存储，把数据更新和错误处理的回调作为参数传入，直接返回清理函数：

getBuds: (uid, onUpdate, onError) => {
  try {
    // 直接返回onSnapshot的清理函数，不需要await
    return db
      .collection('users')
      .doc(uid)
      .collection('buds')
      .onSnapshot(
        (snapshot) => {
          // 每次快照返回全量最新数据，直接生成新数组，不要push旧数组避免重复
          const budData = snapshot.docs.map(doc => doc.data());
          onUpdate(budData);
        },
        (error) => {
          console.log('Error @getBuds ', error);
          onError?.(error);
        }
      );
  } catch (error) {
    console.log('Error @getBuds ', error);
    onError?.(error);
    return () => {};
  }
},

组件useEffect写法 #

useEffect(() => {
  // 调用API拿到监听清理函数
  const unsubscribe = firebase.getBuds(
    user.uid,
    // 数据更新回调，直接更新状态
    (budData) => setBuds(budData),
    // 错误处理回调
    (err) => console.log(err)
  );

  // 组件卸载/用户ID变化时，执行清理函数取消Firestore监听
  return () => unsubscribe();
}, [user.uid]);

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