如何解决Redux+TypeScript中空初始状态的类型报错问题

你的问题根源在于MediaDetailState把空对象{}作为联合类型的一员，TypeScript会基于你定义的类型做静态检查——哪怕你确保组件只在状态填充后渲染，它依然会认为mediaDetails可能是空对象，因此提示属性不存在于{}类型。

以下是几种安全且符合TypeScript规范的解决方案：

1. 用明确的状态标记区分未初始化/已填充状态（推荐） #

定义一个专门的未初始化类型，替代原来的空对象，让TypeScript能清晰识别状态的不同阶段：

修改Redux类型定义 #

export type ExtraMediaDetails = { mediaType: mediaTypeType; mediaid: number };
// 新增未初始化状态类型
type UninitializedMediaState = { status: 'uninitialized' };
export type MediaDetailState =
  | (MovieDetail & ExtraMediaDetails)
  | (TvDetail & ExtraMediaDetails)
  | UninitializedMediaState;

// 初始状态改为明确的未初始化标记
let initialState: MediaDetailState = { status: 'uninitialized' };

组件中添加类型守卫 #

在组件里通过状态标记判断，TypeScript会自动收窄类型，无需额外断言：

const TopSection = () => {
  const { username } = useAppSelector((state) => state.auth);
  const mediaDetails = useAppSelector((state) => state.media);
  
  // 未初始化时返回加载状态或直接不渲染
  if (mediaDetails.status === 'uninitialized') {
    return <div>Loading...</div>;
  }
  
  // 此处TypeScript已自动识别mediaDetails为已填充的类型，可安全解构
  const { mediaid, mediaType } = mediaDetails;
  // ... 其余组件代码
};

2. 临时方案：非空断言或类型断言（谨慎使用） #

如果你暂时不想修改状态类型，可以用非空断言或类型断言绕过检查，但这会跳过TypeScript的静态校验，仅在你100%确认状态已填充时使用：

非空断言 #

const TopSection = () => {
  const { username } = useAppSelector((state) => state.auth);
  const mediaDetails = useAppSelector((state) => state.media);
  // 用!告诉TypeScript属性一定存在
  const { mediaid, mediaType } = mediaDetails!;
  // ... 其余组件代码
};

类型断言 #

const TopSection = () => {
  const { username } = useAppSelector((state) => state.auth);
  // 直接断言为已填充的状态类型
  const mediaDetails = useAppSelector((state) => state.media) as (MovieDetail & ExtraMediaDetails) | (TvDetail & ExtraMediaDetails);
  const { mediaid, mediaType } = mediaDetails;
  // ... 其余组件代码
};

3. 优化初始状态类型（可选） #

如果初始状态并非完全为空，只是缺少部分属性，可以用Partial类型定义初始状态，但后续要确保状态更新后转为完整类型：

// 先定义完整的已填充类型
type FilledMediaDetailState = (MovieDetail & ExtraMediaDetails) | (TvDetail & ExtraMediaDetails);
// 初始状态用Partial类型
let initialState: Partial<FilledMediaDetailState> = {};
// 但需要在reducer中确保更新后转为完整类型

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