Supabase TypeScript两层关联查询类型校验报错求助

问题情况 #

已实现Supabase第一层关联agent_profile，但关联第二层agent_office时：

• 查询能正常返回正确数据
• VS Code及运行应用时，提示agent_office不存在于AgentProfile类型上

相关代码 #

查询语句（原错误写法） #

const realestateWithAgentProfileAndAgentOfficeQuery = supabase.from('realestate')
supabase.from('realestate')  

.select('*,agent_profile(*, agent_office(*))')  
.limit(1)

type RealEstateWithAgentQuotes = QueryData<typeof realestateWithAgentProfileAndAgentOfficeQuery>

状态定义 #

const [realEstate, setRealEstate] = useState<RealEstateWithAgentQuotes>()

报错触发代码 #

{(realEstate.agent_profile.map((quote: AgentProfile) => (
  {quote.agent_office}
)))}

报错信息 #

“agent_office” 不存在于类型“{......}”上

原因分析 #

1. 查询变量未正确赋值：原代码中realestateWithAgentProfileAndAgentOfficeQuery仅初始化了基础查询对象，后续的.select()和.limit()调用未赋值给该变量，导致QueryData推导的类型不包含嵌套关联字段。
2. 类型不匹配：手动使用的AgentProfile是Supabase自动生成的基础类型，未包含agent_office嵌套字段，但实际返回数据的类型是QueryData推导的含嵌套字段的类型，二者不匹配导致报错。

解决步骤 #

1. 修正查询变量赋值 #

确保完整查询链赋值给变量，让QueryData正确推导类型：

const realestateWithAgentProfileAndAgentOfficeQuery = supabase.from('realestate')
  .select('*,agent_profile(*, agent_office(*))')  
  .limit(1);

type RealEstateWithAgentQuotes = QueryData<typeof realestateWithAgentProfileAndAgentOfficeQuery>

2. 使用自动推导的子类型替代手动AgentProfile #

不要用Supabase生成的基础AgentProfile类型，改用RealEstateWithAgentQuotes中推导的含agent_office的子类型：

// 方式1：省略手动类型标注，让TS自动推断
{(realEstate?.agent_profile.map((quote) => (
  <div>{JSON.stringify(quote.agent_office)}</div>
)))}

// 方式2：显式定义子类型
type AgentProfileWithOffice = RealEstateWithAgentQuotes['agent_profile'][number];

{(realEstate?.agent_profile.map((quote: AgentProfileWithOffice) => (
  <div>{quote.agent_office?.name}</div>
)))}

可选：手动扩展基础类型（不推荐） #

若需复用含agent_office的AgentProfile类型，可手动扩展：

import { AgentProfile, AgentOffice } from '../types/supabase'; // 导入Supabase生成的基础类型

type AgentProfileWithOffice = AgentProfile & {
  agent_office: AgentOffice;
};

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