如何在Next.js多组件中使用currentUser？解决未登录500错误

你的问题核心是未登录时session为null，但API路由里直接访问session.user.email引发空指针错误，导致返回500状态码。以下是具体的修复和优化方案：

1. 先修复API路由的空值判断 #

在/api/currentUser的GET处理函数中，先检查session是否存在，避免后续代码因空值报错：

import db from "@/prisma/db";
import { getServerSession } from "next-auth";
import { NextResponse } from "next/server";
import { authOptions } from "../auth/[...nextauth]/route";

export async function GET() {
  const session = await getServerSession(authOptions);

  // 未登录/无有效session时直接返回空值，避免数据库查询报错
  if (!session || !session.user?.email) {
    return NextResponse.json(null, { status: 200 });
    // 也可根据需求返回401未授权：return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const currentUser = await db.utilizatori.findFirst({
    where: {
      email: session.user.email,
    },
  });
  return NextResponse.json(currentUser);
}

2. 优化客户端UserContext逻辑 #

结合NextAuth的useSession钩子，仅在用户登录时请求用户数据，同时处理API可能返回的异常状态：

"use client";
import { createContext, useContext, useEffect, useState } from "react";
import { useSession } from "next-auth/react"; // 引入NextAuth的session钩子

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const { data: session } = useSession(); // 获取当前session状态

  useEffect(() => {
    const fetchCurrentUser = async () => {
      // 无session时直接清空用户数据
      if (!session) {
        setCurrentUser(null);
        return;
      }

      try {
        const response = await fetch(`/api/currentUser`);
        if (response.ok) {
          const userData = await response.json();
          setCurrentUser(userData);
        } else {
          setCurrentUser(null);
        }
      } catch (error) {
        console.error("Error fetching current user:", error);
        setCurrentUser(null);
      }
    };

    fetchCurrentUser();
  }, [session]); // 依赖session变化，登录/登出时自动重新请求

  return (
    <UserContext.Provider value={currentUser}>{children}</UserContext.Provider>
  );
};

export const useCurrentUser = () => useContext(UserContext);

额外优化方向 #

• 若使用Next.js 13+ App Router，可在Server Component中直接获取用户数据，通过props传递给客户端组件，减少一次API请求，同时避免客户端请求的权限问题。
• 可在Context中添加loading状态，方便组件处理加载中的UI逻辑，提升用户体验。

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