Next.js 13.4 App目录下条件菜单不生效问题求助

问题 #

我用Next.js 13.4的App目录/路由做项目，只会前端开发，写API和JSX条件判断时遇到问题。RootLayout里通过await getCurrentUser()拿到用户对象传给Navbar组件，但Navbar里判断用户是否存在来显示登录/登出按钮的逻辑一直显示Login，不管用户实际有没有登录。相关代码如下：

RootLayout代码 #

export default async function RootLayout({ children }) {
    const user = await getCurrentUser();
    return (
        <html lang="en">
            <body suppressHydrationWarning={true}>
                <Navbar user={user} />
                {children}
                <Footer />
            </body>
        </html>
    );
}

用户对象示例 #

user: {
    id: 5,
    first_name: 'john',
    last_name: 'doe',
    email: 'john@gmail.com'
}

Navbar组件条件逻辑 #

{user && user.id ? (
    <button
        onClick={handleLogout}
    >
        Logout
    </button>
) : (
    <Link
        href="/auth/signin"
    >
        Login
    </Link>
)}

排查与解决思路 #

1. 先确认getCurrentUser()的真实返回值
   别光看示例对象，直接在RootLayout里打印user看看实际返回：

   const user = await getCurrentUser();
   console.log('当前用户数据:', user); // 看控制台输出的真实内容
   

   大概率是这个函数在用户未登录时返回的不是null/undefined，而是空对象{}——这时候user && user.id里的user是真，但user.id不存在，导致条件不成立，始终走Login分支。

2. 调整Navbar的判断逻辑
   如果确实返回空对象，把判断改成更严谨的写法：

   {user?.id ? ( // 用可选链直接判断id是否存在且有效
       <button onClick={handleLogout}>Logout</button>
   ) : (
       <Link href="/auth/signin">Login</Link>
   )}
   

   或者直接检查用户对象是否有有效属性：

   {user && Object.keys(user).length > 0 ? (
       <button onClick={handleLogout}>Logout</button>
   ) : (
       <Link href="/auth/signin">Login</Link>
   )}
   

3. 检查服务端渲染与客户端 hydration 冲突
   RootLayout是服务端组件（因为用了await），如果Navbar是客户端组件，记得在Navbar顶部加'use client'，确保客户端能正确处理状态和交互。另外可以去掉suppressHydrationWarning，看看控制台有没有hydration警告，根据提示调整。

4. 验证getCurrentUser()的逻辑正确性
   确认这个函数在用户登录时确实返回带有效id的对象，未登录时返回null或undefined。比如检查它是否正确读取了session、cookie，或者调用后端API时有没有解析错误。

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