如何解决next-auth集成Discord OAuth时出现React Promise渲染报错

错误根源 #

你遇到的报错完全来自Nav.jsx文件的写法错误，和_app.js无关，共有三个核心问题：

1. 你将Nav组件声明为async函数，所有async函数执行后都会返回Promise对象，React无法直接渲染Promise，就会抛出你看到的Objects are not valid as a React child (found: [object Promise])错误。
2. 你定义的returnSignIn同样是async函数，且内部调用了useSession、useState、useEffect等React Hook，违反了React Hook只能在函数组件顶层调用的规则，就算去掉async也会触发其他报错。
3. 你修改后的代码仍然保留了Nav组件的async声明，以及错误的returnSignIn写法，所以问题没有解决。

修复后的完整Nav.jsx代码 #

import Link from 'next/link';
import { useState, useEffect } from 'react';
import { useSession, signIn } from 'next-auth/react';

const Nav = () => {
  const { data: session } = useSession();
  const [profileData, setProfileData] = useState(null);
  const [loading, setLoading] = useState(false);

  // 把异步请求逻辑放到组件顶层的useEffect中
  useEffect(() => {
    if (!session?.accessToken) return;
    setLoading(true);
    const fetchProfile = async () => {
      try {
        const res = await fetch('https://discord.com/api/users/@me', {
          headers: {
            authorization: `Bearer ${session.accessToken}`,
          },
        });
        const data = await res.json();
        setProfileData(data);
      } catch (err) {
        console.error('拉取Discord用户信息失败', err);
        setProfileData(null);
      } finally {
        setLoading(false);
      }
    };
    fetchProfile();
  }, [session]);

  // 登录按钮渲染逻辑写在普通同步函数中
  const renderAuthButton = () => {
    if (!session) return <button onClick={() => signIn()} className="btn btn-primary">Sign In</button>;
    if (loading) return <span className="btn btn-disabled">加载中</span>;
    if (!profileData) return <button onClick={() => signIn()} className="btn btn-primary">Sign In</button>;
    return <p>E</p>;
  };

  return (
    <div className="navbar z-10 top-0 fixed shadow-lg bg-neutral text-neutral-content inset-x-0 bg-opacity-80 backdrop-filter backdrop-blur-lg">
      <div className="px-2 mx-2 navbar-start">
        <span className="text-lg font-bold">Status+</span>
      </div>
      <div className="hidden px-2 mx-2 navbar-center lg:flex">
        <div className="flex items-stretch">
          <div className="btn btn-ghost btn-sm rounded-btn">
            <Link href="/">Home</Link>
          </div>
          <div className="btn btn-ghost btn-sm rounded-btn">
            <Link href="/">Status</Link>
          </div>
          <div className="btn btn-ghost btn-sm rounded-btn">
            <Link href="/">Dashboard</Link>
          </div>
        </div>
      </div>
      <div className="navbar-end">
        {renderAuthButton()}
      </div>
    </div>
  );
};

export default Nav;

获取更详细堆栈的方法 #

1. 开发模式下打开浏览器控制台，报错堆栈会直接标注触发错误的组件及对应行号，可以快速定位问题位置。
2. 在next.config.js中开启reactStrictMode: true，会增加开发环境下的规范校验提示，提前暴露不符合React写法规范的问题。
3. 安装React DevTools浏览器扩展，在组件树中可以直观看到每个组件的返回值状态，快速定位返回异常值的组件。

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