React自定义Firestore实时监听Hook是否会创建多个监听器咨询

关于你提出的两个顾虑的回应 #

1. 认证波动会不会导致重复监听器 #

不会。你的useEffect已经正确返回了Firestore的unsubscribe销毁函数，React的effect执行机制会保证：当依赖项uid变化时，会先执行上一次effect返回的清理函数销毁旧监听器，再执行新的effect创建新监听器，不会有重复残留的监听器。

2. 能不能仅在uid存在时才传入Hook #

React的Hook调用规则禁止在条件语句中调用Hook，所以不能在外层写if(uid) useNotification()，但有两个更合理的实现方案：

• 方案1：给自定义Hook加enabled开关参数，只有enabled为true时才执行监听逻辑，适合需要手动控制监听启停的场景
• 方案2：直接在Hook内部做uid非空判断，也就是你现在的写法，只要加一层时间戳的优化就足够稳定，不需要额外修改外层调用逻辑

现有代码可优化点 #

1. 修正时间戳的赋值时机：你现在的timeRef是在Hook初始化时就赋值，若用户打开页面后很久才登录，会导致拉取到登录时间之前、页面加载时间之后的历史通知，不符合你的需求。可以把时间戳赋值放到uid首次存在时执行。
2. 优化快照处理逻辑：用docChanges()判断仅处理新增的文档，避免文档修改、删除操作触发不必要的状态更新。
3. 优化外层调用的依赖项：把监听通知的effect依赖从整个data对象改为仅data.notification，避免loading、error变化时触发不必要的弹窗逻辑。

优化后代码 #

useNotification 实现 #

import { useEffect, useRef, useState } from "react";
import { clientFirestore } from "@/frontend/client/firebase";
import {
  collection,
  query,
  limit,
  orderBy,
  where,
  onSnapshot,
} from "firebase/firestore";
import { useAuth } from "./useAuth";

const useNotification = (enabled = true) => {
  const timeRef = useRef(null);
  const { user } = useAuth();
  const uid = user?.uid;

  const [data, setData] = useState({
    error: null,
    loading: true,
    notification: null,
  });

  useEffect(() => {
    // 只要uid不存在或者开关未开启，直接返回不创建监听器
    if (!uid || !enabled) return;
    // 首次监听器创建时才赋值时间戳，保证是用户登录后的时间
    if (!timeRef.current) {
      timeRef.current = Date.now();
    }

    const notificationQuery = query(
      collection(clientFirestore, `users/${uid}/notification_history`),
      orderBy("createdAt"),
      where("createdAt", ">=", timeRef.current),
      limit(1)
    );

    const unsubscribe = onSnapshot(
      notificationQuery,
      (snapshot) => {
        let newNotification;
        // 仅处理新增的文档
        snapshot.docChanges().forEach(change => {
          if (change.type === 'added') {
            const doc = change.doc;
            const docData = doc.data();
            newNotification = {
              id: doc.id,
              message: docData.message,
              createdAt: docData.createdAt,
            };
          }
        });
        setData({
          error: null,
          loading: false,
          notification: newNotification,
        });
      },
      (error) => {
        setData({
          error,
          loading: false,
          notification: null,
        });
        console.log(error);
      }
    );

    return unsubscribe;
  }, [uid, enabled]);

  return data;
};

export default useNotification;

外层调用代码 #

const data = useNotification();

useEffect(() => {
  if (data?.notification) {
    toast.success(data.notification.message);
    playSound();
  }
}, [data.notification]);

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