Next.js用户资料模态框修改后数据不实时更新问题求助

问题分析 #

在Next.js应用中开发用户资料模态框时，修改资料后数据库数据已更新，但打开/关闭模态框仍显示旧数据，仅页面刷新后才能获取最新内容。核心原因是自定义Hook useGetCurrentUser 仅在组件挂载时获取一次用户数据，后续数据更新未触发状态刷新。

现有代码的问题点：

• useGetCurrentUser 中的 useEffect 依赖为空数组，仅执行一次用户数据拉取。
• 资料修改完成后，没有触发重新获取用户数据的逻辑，导致currentUser状态未同步最新值。

解决方案 #

方案1：给自定义Hook添加手动刷新方法 #

修改useGetCurrentUser，封装用户数据获取逻辑，并新增手动刷新函数，在资料修改完成后调用该函数更新状态。

export const useGetCurrentUser = () => {
  const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  // 封装用户数据获取逻辑
  const fetchUser = async (user: User) => {
    const snapshot = await getDoc(doc(db, "users", user.uid));
    setCurrentUser(snapshot.data() as CurrentUser);
    setLoading(false);
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) {
        await fetchUser(user);
      } else {
        setCurrentUser(null);
        setLoading(false);
      }
    });

    return unsubscribe;
  }, []);

  // 新增手动刷新用户数据的方法
  const refreshUser = async () => {
    const user = auth.currentUser;
    if (user) {
      setLoading(true);
      await fetchUser(user);
    }
  };

  return { currentUser, loading, refreshUser };
};

在资料修改的提交函数中调用refreshUser：

const handleUpdateProfile = async (formData: FormData) => {
  // 执行数据库更新逻辑
  await updateDoc(doc(db, "users", currentUser.id), {
    // 填写需要更新的字段，比如name, avatar等
  });
  // 更新完成后刷新用户数据
  refreshUser();
};

方案2：监听模态框显示状态自动刷新 #

利用控制模态框显示的searchParams参数，在模态框打开时自动触发数据刷新。

修改Profile组件：

export const Profile = () => {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const profileModal = searchParams.get("profileModal");
  const { currentUser, loading, refreshUser } = useGetCurrentUser();

  // 当模态框打开时，自动刷新用户数据
  useEffect(() => {
    // 根据你的参数值调整判断条件，比如参数为"open"时触发
    if (profileModal) {
      refreshUser();
    }
  }, [profileModal, refreshUser]);

  return (
    // 模态框渲染内容
  );
};

方案3：使用Firestore实时监听（自动同步） #

如果希望数据库数据变化时自动同步前端状态，可以用onSnapshot替代getDoc，实现实时监听：

export const useGetCurrentUser = () => {
  const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    let unsubscribeAuth: () => void;
    let unsubscribeSnapshot: (() => void) | undefined;

    unsubscribeAuth = onAuthStateChanged(auth, (user) => {
      if (user) {
        setLoading(true);
        // 实时监听用户文档变化
        unsubscribeSnapshot = onSnapshot(doc(db, "users", user.uid), (snapshot) => {
          setCurrentUser(snapshot.data() as CurrentUser);
          setLoading(false);
        });
      } else {
        setCurrentUser(null);
        setLoading(false);
      }
    });

    // 清理监听
    return () => {
      unsubscribeAuth();
      unsubscribeSnapshot?.();
    };
  }, []);

  return { currentUser, loading };
};

这种方式下，只要数据库中用户数据更新，前端currentUser状态会自动同步，无需手动调用刷新。

总结 #

• 若需要手动控制刷新时机，选择方案1+方案2组合，既保证修改后主动刷新，也能在打开模态框时重新拉取最新数据。
• 若需要数据自动同步，直接使用方案3的实时监听逻辑。

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