React Firestore useEffect内onSnapshot重复触发问题求解

你的异常调用100%是useEffect依赖数组配置错误导致的，触发了无限重建监听的死循环：

• 当前effect的依赖项是me状态，每次快照回调执行setMe更新me，都会触发依赖变更，effect会先执行清理函数取消旧监听，再重新执行创建全新的快照监听
• 新监听建立后会立刻返回当前文档的快照，再次触发setMe更新me，循环往复就产生了每分钟数千次的无效调用

另外代码里还有两个潜在隐患：

• 直接在effect内调用getAuth()取currentUser，没有处理鉴权初始化未完成、用户未登录的空值场景，容易抛出Cannot read properties of null (reading 'uid')的报错
• me的初始值设为空数组不符合语义，你存储的是用户对象，初始值应该为null

Firestore的onSnapshot本身的机制就是：首次建立监听时拉取一次当前文档数据，后续仅当监听的文档在服务端发生变更时才会推送新快照，完全匹配你“仅当用户更新头像/显示名时才刷新视图”的需求，不需要把me放到依赖数组里反复重建监听。
你只需要把监听的触发条件绑定到「当前登录用户变化」这个场景即可——也就是只有当登录用户切换时，才需要取消旧用户的文档监听，给新登录的用户建立新的文档监听。

修正后的完整代码：

import { doc, onSnapshot } from "firebase/firestore";
import { useAuthContext } from "./你的auth上下文路径"; // 替换为实际导入路径
import { db } from "./你的firebase初始化路径"; // 替换为实际导入路径
import Avatar from "./你的Avatar组件路径"; // 替换为实际导入路径
import { useEffect, useState } from "react";

export default function UserBar() {
  const { user } = useAuthContext();
  // 初始值改为null，匹配用户对象的语义
  const [me, setMe] = useState(null);

  useEffect(() => {
    // 没有登录用户时直接返回，不建立监听
    if (!user?.uid) return;

    // 直接用上下文里的user.uid定位文档，避免auth初始化时序问题
    const unsub = onSnapshot(doc(db, "users", user.uid), (snap) => {
      if (snap.exists()) {
        setMe(snap.data());
      }
    });

    // 组件卸载/用户切换时取消监听，防止内存泄漏
    return () => unsub();
  }, [user?.uid]); // 仅依赖用户uid，用户不变就不会重建监听

  return (
    <>
      {user && me && (
        <div className="user-bar">
          <p className="oneHunid">
            Welcome
            <span className="bold">&nbsp;&nbsp;{me.displayName || user.displayName}!</span>
          </p>
          <Avatar src={me.photoURL} />
        </div>
      )}
    </>
  );
}

• 渲染逻辑里加了me的存在判断，避免组件初次挂载时me为null导致读取photoURL报错
• 显示名优先取Firestore里存储的me.displayName，如果还没拉到数据就兜底用auth上下文自带的displayName，避免首屏空白
• 移除了调试用的console日志，避免生产环境多余输出

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