基于用户认证状态的组件条件渲染问题求助

你的代码中出现两个组件同时渲染的核心原因是异步请求导致的状态延迟：初始渲染时user状态为null，会先渲染NotLoggedHome；当fetchUser异步请求完成后，user状态更新，组件重新渲染为LoggedHome。这种切换过程可能让你误以为两个组件同时存在。另外，还需要确认useAuthContext的返回值是否正确，以及缺少加载状态处理。

具体修复步骤： #

1. 添加加载状态，避免初始状态误渲染
   添加loading状态变量，在异步请求完成前显示加载组件，防止未登录组件短暂出现。

2. 完善authUser为null时的状态处理
   当用户未登录时（authUser为null），直接将user设为null并结束加载，避免不必要的等待。

3. 确保useAuthContext返回值正确
   检查AuthContext的定义，确保它直接返回Firebase的User对象或null，而非嵌套对象。如果是嵌套对象，需解构获取用户信息：

   // 假设AuthContext返回{ user: User | null }
   const { user: authUser } = useAuthContext();
   

修改后的完整代码： #

"use client";

import RootLayout from "@/src/app/layout";
import Nav from "@/src/components/_common/Nav";
import { useAuthContext } from "@/src/context/AuthContext";
import React, { useCallback, useEffect, useState } from "react";
import { IUser } from "@/src/interfaces/user";
import { User } from "firebase/auth";
import { getUserById } from "@/src/firebase/firestore/getData";
import { displayErrorToaster } from "@/src/components/_common/Toast";
import { useRouter } from "next/navigation";
import NotLoggedHome from "@/src/components/home/notLoggedHome";
import LoggedHome from "@/src/components/home/loggedHome";

const Page = () => {
  const router = useRouter();
  const authUser = useAuthContext(); // 确认此处返回的是User|null，若为嵌套对象需解构

  const [user, setUser] = useState<IUser | null>(null);
  const [loading, setLoading] = useState(true); // 添加加载状态

  const fetchUser = useCallback((authUser: User) => {
    setLoading(true);
    getUserById(authUser.uid)
      .then((r) => {
        setUser(r);
      })
      .catch(() => displayErrorToaster("Une erreur est survenue"))
      .finally(() => {
        setLoading(false); // 请求完成后结束加载
      });
  }, []);

  useEffect(() => {
    if (authUser) {
      fetchUser(authUser);
    } else {
      // 用户未登录时直接设置状态
      setUser(null);
      setLoading(false);
    }
  }, [router, authUser, fetchUser]);

  const navigation = [
    { name: "Home", href: "#", current: true },
    { name: "DashBoard", href: "#", current: false },
    { name: "Calendar", href: "#", current: false },
    { name: "Sign In", href: "/signin", current: false },
    { name: "Sign Up", href: "/signup", current: false },
  ];

  const loggedNavigation = [
    { name: "Home", href: "/", current: true },
    { name: "DashBoard", href: "#", current: false },
    { name: "Calendar", href: "#", current: false },
  ];

  // 加载状态下显示加载组件
  if (loading) {
    return <div>Chargement...</div>; // 替换为你的自定义加载组件
  }

  return (
    <RootLayout>
      {user ? (
        <Nav navigation={loggedNavigation} imageUrl={user.imageUrl} />
      ) : (
        <Nav navigation={navigation} imageUrl="default_url" />
      )}
      {!user ? <NotLoggedHome /> : <LoggedHome user={user} />}
    </RootLayout>
  );
};

export default Page;

额外检查项： #

• 确认getUserById函数在用户存在时返回IUser对象，不存在时返回null，而非undefined。
• 测试用户登录/登出流程，观察组件切换是否符合预期，无多余渲染。

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