Supabase Auth-UI报错：Uncaught TypeError: 无法读取null的'useState'属性

每当在登录页面添加Auth组件时就会出现错误，我正按照Supabase的Next.js Pages目录Auth文档操作。怀疑是版本问题，但网上没找到相关auth-ui的解决方案，确定问题由Auth组件导致——只有添加它时才会触发错误。

import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useTheme } from 'next-themes'
import { Database } from '../../types/database.types'

export default function AuthForm() {
    const supabase = createClientComponentClient<Database>()
    const { theme } = useTheme();

    return ( 
            <Auth
            supabaseClient={supabase}
            appearance={{ theme: ThemeSupa }}
            socialLayout="horizontal"
            onlyThirdPartyProviders={true}
            theme={theme === 'dark' ? 'light' : 'dark'}
            showLinks={false}
            providers={['google', 'twitter', 'discord']}
            redirectTo="http://localhost:3000/api/auth/callback"
            />
    )
}

"@supabase/auth-helpers-nextjs": "^0.7.2",
"@supabase/auth-helpers-react": "^0.4.0",
"@supabase/auth-ui-react": "^0.4.2",
"@supabase/auth-ui-shared": "^0.1.6",
"@supabase/supabase-js": "^2.25.0",
"next": "^12.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",

针对这个空指针错误，提供几个排查修复方向：

1. 修复主题初始化问题
   next-themes的useTheme在组件首次渲染时可能返回theme: null，导致后续判断出错。给theme设置默认值：

const { theme = 'light' } = useTheme();

2. 解决SSR/CSR冲突
   Next.js 12 Pages目录下的组件默认是服务器端渲染，而Supabase Auth组件需要在客户端运行。可以用动态导入禁用SSR：

import dynamic from 'next/dynamic';
const Auth = dynamic(() => import('@supabase/auth-ui-react').then(mod => mod.Auth), { ssr: false });

或者用useEffect延迟渲染，确保在客户端环境加载：

import { useState, useEffect } from 'react';

export default function AuthForm() {
    const [isClient, setIsClient] = useState(false);
    const supabase = createClientComponentClient<Database>()
    const { theme = 'light' } = useTheme();

    useEffect(() => {
        setIsClient(true);
    }, []);

    if (!isClient) return null;

    return ( 
            <Auth
            supabaseClient={supabase}
            appearance={{ theme: ThemeSupa }}
            socialLayout="horizontal"
            onlyThirdPartyProviders={true}
            theme={theme === 'dark' ? 'light' : 'dark'}
            showLinks={false}
            providers={['google', 'twitter', 'discord']}
            redirectTo="http://localhost:3000/api/auth/callback"
            />
    )
}

3. 版本兼容性调整
   当前依赖版本组合可能存在兼容性问题：

• 尝试升级Next.js到13.x版本（注意适配Pages目录的用法）
• 或者降级@supabase/auth-ui-react到v0.3.x版本，比如@supabase/auth-ui-react@0.3.5，同时对应调整@supabase/auth-ui-shared到匹配版本

4. 移除重复主题配置
   Auth组件同时设置了appearance.theme和自身的theme属性，可能导致内部冲突。尝试只保留其中一个配置：

<Auth
  supabaseClient={supabase}
  appearance={{ theme: ThemeSupa, colorScheme: theme === 'dark' ? 'light' : 'dark' }}
  socialLayout="horizontal"
  onlyThirdPartyProviders={true}
  showLinks={false}
  providers={['google', 'twitter', 'discord']}
  redirectTo="http://localhost:3000/api/auth/callback"
/>

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