Next.js中TypeError: Cannot convert undefined or null to object错误原因排查

错误根源 #

你遇到的TypeError: Cannot convert undefined or null to object，是因为代码调用Object.values(providers)时，providers的值是undefined或null。Object.values()仅接受合法对象作为参数，传入空值就会触发这个报错。

你的SignIn组件依赖providers这个props，但没有做任何有效性校验，一旦父组件没传该props，或者传入的是null/undefined，就会触发问题。

修复方法 #

方法1：给props设置默认空对象 #

直接给providers设置默认值，确保它始终是一个可处理的对象：

export default function SignIn({ providers = {} }: any) {
    return (
        <>
            {Object.values(providers).map((provider: any) => (
                // 原有组件内容
                <Center key={provider.name} sx={{ width: '100vw', height: '100vh' }}>
                    <Stack spacing='xl'>
                        <Title align='center'>Welcome to Inventory App</Title>
                        {provider.name === "Google" && (
                            <Button onClick={() => signIn(provider.id)} size='lg' sx={{ alignSelf:'center' }}>
                                <Group>
                                    <Text size='md'>Sign in With {provider.name}</Text>
                                    <FaGoogle/>
                                </Group>
                            </Button>
                        )}
                    </Stack>
                </Center>
            ))}
        </>
    )
}

方法2：先校验再执行遍历 #

在调用Object.values前先判断providers是否有效：

export default function SignIn({ providers }: any) {
    return (
        <>
            {providers && Object.values(providers).map((provider: any) => (
                // 原有组件内容
                <Center key={provider.name} sx={{ width: '100vw', height: '100vh' }}>
                    <Stack spacing='xl'>
                        <Title align='center'>Welcome to Inventory App</Title>
                        {provider.name === "Google" && (
                            <Button onClick={() => signIn(provider.id)} size='lg' sx={{ alignSelf:'center' }}>
                                <Group>
                                    <Text size='md'>Sign in With {provider.name}</Text>
                                    <FaGoogle/>
                                </Group>
                            </Button>
                        )}
                    </Stack>
                </Center>
            ))}
        </>
    )
}

方法3：用可选链+空值合并（更严谨） #

结合ES6语法确保providers始终是可处理的对象：

export default function SignIn({ providers }: any) {
    return (
        <>
            {Object.values(providers ?? {}).map((provider: any) => (
                // 原有组件内容
                <Center key={provider.name} sx={{ width: '100vw', height: '100vh' }}>
                    <Stack spacing='xl'>
                        <Title align='center'>Welcome to Inventory App</Title>
                        {provider.name === "Google" && (
                            <Button onClick={() => signIn(provider.id)} size='lg' sx={{ alignSelf:'center' }}>
                                <Group>
                                    <Text size='md'>Sign in With {provider.name}</Text>
                                    <FaGoogle/>
                                </Group>
                            </Button>
                        )}
                    </Stack>
                </Center>
            ))}
        </>
    )
}

额外提示 #

如果你的providers是从NextAuth.js获取的，还要检查服务端的Auth配置是否正确，确保getServerSideProps或getStaticProps能正确返回providers数据，比如：

export async function getServerSideProps(context) {
  const providers = await getProviders()
  return {
    props: { providers }
  }
}

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