TypeScript类型不兼容错误求助：UserResponse与返回数据不匹配

错误核心原因 #

你的类型定义与Supabase返回的数据结构存在两处关键不兼容：

1. users属性类型不匹配：错误提示显示返回的users是数组类型（{ email: any; }[]），但你定义的UserResponse中users是单个User对象。
2. created_at类型不匹配：Supabase返回的是ISO格式字符串，而你定义的类型是Date。
3. Supabase默认返回的字段类型为any，未与你手动定义的类型对齐。

解决方案 #

根据你的数据库关联关系（一对一/一对多），选择对应方案：

方案1：一对一关联（你的数据示例中users是单个对象） #

首先修正类型定义，对齐Supabase返回的实际结构：

type User = {
    email: string
}

type UserResponse = {
    id: number,
    video_id: string,
    created_at: string, // Supabase返回ISO字符串，后续可转为Date
    user_id: string,
    question: string,
    response: string,
    state: boolean,
    users: User // 一对一关联，单个User对象
}

然后在代码中使用类型断言明确数据类型，可选转换created_at为Date：

const { data, error } = await supabase
    .from('responses')
    .select(`
      id,
      user_id,
      video_id,
      question,
      created_at,
      response,
      state,
      users (
        email
      )
    `)
    .order('created_at', {ascending: false})

if (data) {
  // 断言data符合UserResponse[]类型
  const responses = data as UserResponse[]

  // 可选：将created_at转为Date类型
  const formattedResponses = responses.map(res => ({
    ...res,
    created_at: new Date(res.created_at)
  }))

  return new Response(JSON.stringify(formattedResponses), {
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

方案2：一对多关联（错误提示中users是数组） #

如果你的responses表与users表是一对多关联，修正UserResponse中的users类型为数组：

type UserResponse = {
    // 其他字段保持不变
    users: User[] // 改为数组类型
}

同样使用类型断言：

const responses = data as UserResponse[]

进阶：自动生成Supabase类型 #

为了彻底避免手动定义类型的误差，推荐使用Supabase官方的类型生成工具，自动生成与数据库表结构完全匹配的类型：

supabase gen types typescript --project-id <你的项目ID> > src/types/supabase.ts

之后直接导入生成的类型即可，无需手动定义User和UserResponse。

内容的提问来源于stack exchange，提问作者Regis Tremblay Lefrancois