React-Typescript泛型Response类型访问data属性报错求助

核心问题1：直接访问联合类型属性未做类型窄化 #

你的Response<T>是联合类型，包含成功（带data）和失败（带error）两个分支。TypeScript会严格校验类型，只有明确当前值属于成功分支时，才允许访问data属性，直接链式访问会触发类型错误。

核心问题2：多次调用find导致类型守卫失效 #

你写的类型守卫里两次调用了savedItems.find(...)，TypeScript无法保证这两次调用返回的是同一个对象——理论上两次find的结果可能因状态变更而不同，所以第二次访问items.data时，TypeScript依然认为items是联合类型，不会自动窄化。

正确解决步骤 #

1. 先缓存find结果，避免重复调用

把匹配到的目标对象先存到变量里，让TypeScript能跟踪这个变量的类型：

// 缓存find结果，去掉不必要的any，TypeScript会自动推导类型
const targetItem = savedItems?.find(a => a.number === inputNumber);

2. 对缓存变量做类型窄化

通过判断isSuccess窄化items的类型，此时TypeScript能识别出成功分支，允许访问data：

const typeGuardTest = targetItem?.items.isSuccess 
  ? targetItem.items.data.item1 
  : undefined;

完整示例代码

const targetItem = savedItems?.find(a => a.number === inputNumber);
const typeGuardTest = targetItem?.items.isSuccess 
  ? targetItem.items.data.item1 
  : undefined;

额外优化：简洁写法 #

如果允许用逻辑与替代三元表达式，也可以写成更简洁的形式：

const targetItem = savedItems?.find(a => a.number === inputNumber);
const typeGuardTest = targetItem?.items.isSuccess && targetItem.items.data.item1;

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