如何修复Next.js 13与Next Auth中的Objects are not valid as a React child错误？

错误原因定位 #

Error: Objects are not valid as a React child (found: [object Promise]) 本质是你在JSX中直接渲染了Promise对象，而非解析后的实际值。虽然控制台打印的session结构正常，但页面渲染逻辑中一定存在未正确处理的异步操作，导致Promise被当作React子元素输出。

排查与修复步骤 #

1. 修正useSession的调用参数 #

你当前调用useSession([])时传入了空数组，这不符合useSession的参数规范（它接受配置对象或不传参数），可能导致内部状态异常。改为：

const { data: session, status } = useSession();
// 或根据需求传配置，比如强制要求登录：useSession({ required: true })

2. 处理useSession的加载状态 #

useSession返回的status字段会告诉你当前会话状态（loading/authenticated/unauthenticated），必须在加载完成后再渲染依赖session的内容，避免未定义状态引发的隐性问题：

import { useSession, signIn, signOut } from "next-auth/react";

export default function Page() {
  const { data: session, status } = useSession();

  // 加载中状态：避免渲染未就绪的session
  if (status === "loading") {
    return <div>加载中...</div>;
  }

  // 未登录状态
  if (!session) {
    return <button onClick={() => signIn()}>登录</button>;
  }

  // 已登录状态：安全渲染session属性
  return (
    <div>
      <img src={session.user.image} alt={session.user.name} />
      <p>{session.user.name}</p>
      <p>{session.user.email}</p>
      <button onClick={() => signOut()}>退出登录</button>
    </div>
  );
}

3. 检查NextAuth配置中的session回调 #

如果你的pages/api/auth/[...nextauth].js中自定义了session回调，需确保所有异步操作都用await解析，避免返回的session对象中包含Promise类型的属性：

// 错误示例：未await异步操作，导致session.user.id是Promise
session: async ({ session, user }) => {
  session.user.id = getFirebaseUserId(user.email); // 这里缺少await
  return session;
}

// 正确示例：await所有异步操作
session: async ({ session, user }) => {
  session.user.id = await getFirebaseUserId(user.email);
  return session;
}

4. 排查页面中的其他异步渲染 #

检查页面中是否存在直接在JSX中调用异步函数的情况，比如：

// 错误：直接调用异步函数，返回Promise被渲染
<p>{getUserExtraInfo(session.user.id)}</p>

// 正确：用useEffect+状态存储异步结果
const [extraInfo, setExtraInfo] = useState("");
useEffect(() => {
  async function fetchInfo() {
    const info = await getUserExtraInfo(session.user.id);
    setExtraInfo(info);
  }
  if (session) fetchInfo();
}, [session]);

<p>{extraInfo}</p>

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