React Context TypeScript报错：'iCards | iSearch'无'firstName'属性

TypeScript 对联合类型的属性访问遵循严格的交集规则：只有当某个属性存在于联合类型的所有成员中时，你才能直接访问该属性。

你的报错明确指出firstName不存在于iCards类型中——哪怕它存在于iSearch和iInitialData里，只要联合类型iSearch | iCards中有一个成员（也就是iCards）没有这个属性，TypeScript就会阻止你直接访问action.payload.firstName，避免潜在的运行时错误。

根据你的业务需求，有两种可行的修复方式：

1. 补全iCards接口的firstName属性 #

如果iCards逻辑上确实应该包含firstName，直接在接口定义中添加该属性：

interface iCards {
  firstName: string; // 添加这个属性
  // 其他原有属性
}

这样联合类型iSearch | iCards的所有成员都拥有firstName，TypeScript就会允许直接访问该属性。

2. 对联合类型做类型窄化 #

如果iCards确实不需要firstName，则需要在Reducer中先判断action.payload的具体类型，再访问属性（即类型守卫）：

方式一：使用in操作符判断属性存在 #

function reducer(state: iInitialData, action: iAction) {
  const data = {...state};
  if ('firstName' in action.payload) {
    // 这里TypeScript会自动将action.payload窄化为iSearch类型
    data.firstName = action.payload.firstName;
  }
  // 其他逻辑
  return data;
}

方式二：给接口添加判别属性（更推荐） #

给iSearch和iCards添加一个共同的标识字段（比如type），让TypeScript能精准区分类型：

// 修改接口定义
interface iSearch {
  type: 'search'; // 判别字段
  firstName: string;
  // 其他属性
}

interface iCards {
  type: 'cards'; // 判别字段
  // iCards的原有属性
}

// 在Reducer中使用switch做类型窄化
function reducer(state: iInitialData, action: iAction) {
  const data = {...state};
  switch(action.payload.type) {
    case 'search':
      // 这里TypeScript明确知道是iSearch类型
      data.firstName = action.payload.firstName;
      break;
    case 'cards':
      // 处理iCards类型的逻辑
      break;
  }
  return data;
}

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