Next.js项目添加Supabase Auth监听器报错，求修复方案

问题分析 #

你遇到的错误根源是对Supabase onAuthStateChange返回值的结构理解有误：

• 该方法返回的data对象中只有subscription属性，unsubscribe方法是挂载在subscription实例上的，并非直接在顶层对象
• 你手动声明的类型错误地将unsubscribe放在了data的同级，导致类型不匹配，运行时调用listener.unsubscribe()自然找不到方法

修复方案 #

直接修正返回值的解构方式和类型声明，并补充覆盖邮箱验证后的场景（比如用户已登录时验证邮箱会触发USER_UPDATED事件）：

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { supabase } from '../your-supabase-client-path'; // 替换为你的Supabase客户端路径
import type { Subscription } from '@supabase/supabase-js';

export default function YourComponent() {
  const router = useRouter();

  useEffect(() => {
    // 正确解构subscription，类型声明匹配Supabase实际返回结构
    const { data: { subscription } }: { data: { subscription: Subscription } } = supabase.auth.onAuthStateChange(
      async (event, session) => {
        console.log(event, session);
        // 覆盖两种触发场景：登录时已验证邮箱，或登录后验证邮箱触发用户信息更新
        if (session?.user?.email_verified) {
          if (event === 'SIGNED_IN' || event === 'USER_UPDATED') {
            await router.push('/profile-upgrade');
          }
        }
      }
    );

    // 通过subscription实例调用unsubscribe方法
    return () => {
      subscription.unsubscribe();
    };
  }, [router]); // 添加router到依赖，符合React Hooks规范

  return <div>你的组件内容</div>;
}

关键修改点 #

1. 修正解构与类型：将const { data: listener }改为const { data: { subscription } }，类型声明中移除错误的unsubscribe属性，匹配Supabase的实际返回结构
2. 正确取消订阅：调用subscription.unsubscribe()而非listener.unsubscribe()
3. 完善事件监听：增加USER_UPDATED事件监听，确保用户在登录状态下验证邮箱也能触发跳转
4. 规范依赖数组：将router加入useEffect依赖列表，避免React Hooks警告

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