TypeScript 拉取服务端数据与加载状态场景下类型错误如何处理

错误原因 #

你写的!isDataLoading && data逻辑在加载状态下会返回false，而ProfileTemplate的data属性类型是Maybe<profile_data>，通常Maybe类型是T | null | undefined的联合类型，false不属于该类型范围，因此触发类型不匹配错误。
如果直接去掉判断传data，则会因为data可能为null/undefined，直接访问data.first_name时报对象可能为空的错误。

最佳处理方案 #

方案1：父组件分层渲染（最推荐） #

在加载阶段直接渲染加载状态（骨架屏、加载动画等），加载完成后再渲染ProfileTemplate，完全避免空值和类型不匹配问题：

const ProfilePage: FC = (): JSX.Element => {
  const { data, isDataLoading } = useProfileData();

  // 加载状态提前返回
  if (isDataLoading) {
    return <LoadingSkeleton /> // 替换为你的项目内的加载组件即可
  }

  return (
    <ProfileTemplate data={data} />
  );
};

该方案逻辑分层清晰，加载态和正常展示态完全分离，不会出现异常props传入子组件的情况。

方案2：保留组件框架的适配方案 #

如果产品逻辑要求加载时也要展示ProfileTemplate的框架结构，可按以下两步修正：

1. 修正父组件传入的props，将false替换为符合Maybe类型的undefined：

<ProfileTemplate
  data={isDataLoading ? undefined : data}
/>

2. 子组件访问属性时使用可选链适配空值，StaticField的text属性本身支持Maybe<string>类型，可选链返回的undefined完全符合类型要求：

<StaticField label="First Name" text={data?.first_name} />
<StaticField label="Last Name" text={data?.last_name} />

可选优化 #

如果ProfileTemplate内大部分逻辑都依赖data存在，可在组件顶部加空值判断提前返回，后续代码会自动将data类型收窄为非空的profile_data，不需要再写可选链：

export const ProfileTemplate: FC<ProfileProps> = ({ data }): JSX.Element => {
  if (!data) {
    return <LoadingSkeleton />
  }
  return <>
    <StaticField label="First Name" text={data.first_name} />
    <StaticField label="Last Name" text={data.last_name} />
  </>
}

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