Next.js next-auth登录报错Cannot convert null/undefined to object

触发Server Error TypeError: Cannot convert undefined or null to object的核心原因是Object.values(providers)执行时，providers的值为null或undefined。
getProviders()方法会请求NextAuth的鉴权接口拉取配置的登录服务列表，以下几种情况会导致它返回空值：

• NextAuth的路由文件没有放在规定路径，接口无法访问
• NextAuth配置文件中没有正确配置登录服务商列表
• 服务端渲染阶段接口请求超时/失败，未拿到返回值

1. 全链路加空值兜底，避免空值直接传入Object.values触发类型错误
2. 检查NextAuth文件路径是否合规：
   • Pages Router模式下，NextAuth路由文件必须放在pages/api/auth/[...nextauth].js
   • App Router模式下，NextAuth路由文件必须放在app/api/auth/[...nextauth]/route.js
3. 确认NextAuth配置中已经正确添加了你需要使用的登录服务商（如Spotify、GitHub、Google等）

修复后的完整代码如下：

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

function Login({ providers = {} }) {
  return (
    <div className="flex flex-col items-center bg-black min-h-screen w-full justify-center">
      <img className="w-52 mb-5" src="https://links.papareact.com/9xl" alt="" />

      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button
            className="bg-[#18D860] text-white p-5 rounded-full"
            onClick={() => signIn(provider.id, { callbackURL: "/" })}
          >
            Login with {provider.name}
          </button>
        </div>
      ))}
    </div>
  );
}

export default Login;

export async function getServerSideProps() {
  const providers = (await getProviders()) ?? {};

  return {
    props: {
      providers,
    },
  };
}

注：如果加完兜底后页面不显示登录按钮，优先排查NextAuth配置文件里的providers数组是否正确传入了对应登录服务的配置项。

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