React Native TypeScript中RTK Query数据undefined类型报错解决

TypeScript的类型收窄是基于静态代码分析的，它无法识别!isLoading和latestData存在之间的业务逻辑绑定关系：RTK Query的返回类型中，isLoading和data是两个独立字段，TS不会自动推导「加载完成时data一定存在」这个规则，因此哪怕你写了!isLoading判断，TS仍然会认为latestData的类型是Post[] | undefined，直接访问属性就会报类型错误。

你的两个顾虑其实都不成立：

• 关于编译体积：可选链是ES2020标准语法，当前React Native的默认运行环境（Hermes、iOS/Android原生WebView）都原生支持，TS/Babel转译时不会生成额外冗余代码；就算兼容低版本，单个可选链转译后的判断逻辑体积可以忽略，完全不需要刻意规避。
• 可选链不是hack方案：只要是逻辑上确实可能为null/undefined的访问路径，加可选链就是标准的防御性编程写法，反而是靠关闭IDE校验、强行类型断言（如as Post[]）才是会埋运行时隐患的权宜方案。

不需要到处加可选链，也不需要关闭校验规则，选下面任意一种写法就能彻底解决问题：

方案1：给latestData设置默认值（推荐） #

从根源上消除undefined类型，让TS能确定latestData永远是数组类型：

// 空数组作为兜底默认值，latestData类型推导为Post[]
const latestData = data?.slice(0, 10) ?? [];

useEffect(() => {
  // 这里不需要判断latestData是否存在，加载中状态下它是空数组，length为0自然不满足条件
  if (!isLoading && latestData.length > 0 && some_other_condition) {
    // 块内latestData类型自动收窄为有内容的Post数组，无类型报错
    // ...业务逻辑
  }
}, [latestData, isLoading]); // 注意：原代码依赖数组漏了isLoading，违反Hooks依赖规则，会有闭包旧值问题

useEffect(() => {
  // 数组为空时latestData[0]是undefined，这里的可选链是真实逻辑需要，不是为了消TS报错
  if (!isLoading && latestData[0]?.id === 'something' && some_other_condition) {
    // ...业务逻辑
  }
}, [latestData, isLoading]);

这种写法最符合数据状态的语义：加载过程中latestData就是空列表，不会出现undefined这种需要额外判断的特殊值，后续所有调用位置都不需要重复判空。

方案2：在条件判断中显式做存在性校验 #

如果不想加默认值，只要在判断条件最前面加对latestData的存在性检查，TS就会自动收窄后续代码块内的类型：

const { data, isLoading } = useGetBlogPostsQuery();
const latestData = data?.slice(0, 10);

useEffect(() => {
  // 显式判断latestData存在，TS会自动把后续块内的latestData类型推导为Post[]
  if (!isLoading && latestData && latestData.length > 0 && some_other_condition) {
    // 无类型报错
  }
}, [latestData, isLoading]);

注意：永远不要通过关闭IDE/TS校验规则来隐藏这类报错，类型提示的本质是提醒你代码没有覆盖全量可能的状态，强行关闭校验只会把编译时问题留到运行时崩溃。

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