Vue3+TS集成Supabase注册报错求助：类型匹配问题

针对你遇到的三个TypeScript类型问题，逐一给出修复方案：

错误1：类型{ data: { user: User | null; session: Session | null; }; error: null; }不存在user属性 #

Supabase v2及以上版本的auth.signUp返回值结构已调整，user和session嵌套在data字段内，不能直接解构顶级的user。

修复示例：

// 错误写法
const { user, error } = await supabase.auth.signUp({
  email: 'example@test.com',
  password: '123456'
})

// 正确写法
const { data, error } = await supabase.auth.signUp({
  email: 'example@test.com',
  password: '123456'
})
const { user, session } = data // 从data中解构user和session

错误2：AuthResponse类型不存在user属性 #

AuthResponse的类型定义在Supabase v2中已更新，其结构为：

type AuthResponse = {
  data: {
    user: User | null;
    session: Session | null;
  };
  error: AuthError | null;
}

你需要通过response.data.user来访问用户对象，而非直接response.user。

错误3：error类型为unknown #

Supabase返回的错误属于AuthError类型，可通过类型收窄或显式导入类型来处理：

方案1：类型收窄 #

const { data, error } = await supabase.auth.signUp(...)
if (error) {
  // 收窄error类型为AuthError
  const authError = error as import('@supabase/supabase-js').AuthError
  console.error(authError.message)
}

方案2：提前导入类型 #

import { AuthError, User, Session } from '@supabase/supabase-js'

// 在函数中直接指定类型
const signUp = async () => {
  const { data, error }: { data: { user: User | null; session: Session | null }, error: AuthError | null } = await supabase.auth.signUp({
    email: email.value,
    password: password.value
  })
  
  if (error) {
    console.error(error.message)
  } else {
    console.log(data.user)
  }
}

额外检查点 #

1. 确认你的supabase.ts配置中使用的是v2版本的初始化方式：

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseKey)

2. 确保@supabase/supabase-js版本为v2+，可通过package.json查看，若版本过低建议升级：

npm install @supabase/supabase-js@latest

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