服务器错误：TypeError：无法将未定义或 null 转换为对象

Question

这是代码

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

function signIn({ providers }) {
    return (
        <>
            {Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button onClick={() => SignIntoProvider(provider.id)}>
                        Sign in with {provider.name}
                    </button>
                </div>
            ))}
        </>
    )
}

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

    return {
        props: {
            providers
        }
    }
}

export default signIn

我在从官方网站粘贴 NextAuth.js 示例代码时收到此错误。我有最新版本的 Node.js 和 Next.js。

你可以在这里找到完整的源代码https://github.com/aadipoddar/instagram-react

Answer 1

将您的 NEXTAUTH_URL 正确配置为您的客户端 url，例如

NEXTAUTH_URL=http://localhost:3000

Answer 2

这是map 函数在providers 实际具有任何值之前被调用的结果。
您可以使用条件渲染来避免此类问题。

试试这个：

{providers && providers.length && Object.values(providers).map((provider) => ( ...

您可以通过将其存储在变量中来使其看起来更好。

像这样：

function signIn({ providers }) {
    const checkProviders = (
       providers &&
       providers.length
    );

    return (
        <>
            {checkProviders && Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button onClick={() => SignIntoProvider(provider.id)}>
                        Sign in with {provider.name}
                    </button>
                </div>
            ))}
        </>
    )
}