如何为React条件渲染添加类型注解？解决TS索引类型报错

核心问题 #

报错的本质是类型不匹配：你的types接口定义的键是字符串类型的'0'/'1'/'2'，但step是number类型。TypeScript对索引类型有严格校验，不允许用数字类型去索引字符串键的对象。

解决方法（按推荐优先级排序） #

1. 统一step与接口键的类型（最推荐）

把step的类型改为和接口键一致的字符串字面量联合类型，从根源上消除类型不匹配：

interface Types { // 注意：TypeScript接口名建议首字母大写
  '0': JSX.Element;
  '1': JSX.Element;
  '2': JSX.Element;
}

export default function Economy(props: any) {
  // 强制step只能是'0'/'1'/'2'中的一个
  const [step, setStep] = useState<'0' | '1' | '2'>('0')

  const render = () => {
    const component: Types = {
      '0': <Home />,
      '1': <Create />,
      '2': <Detail />,
    }
    return component[step] // 此时类型完全匹配，无报错
  }

  return (
    <>{render()}</>
  )
}

2. 给接口添加数字索引签名

如果不想修改step的数字类型，可以给types接口添加数字索引签名，允许用数字索引：

interface Types {
  // 添加数字索引，声明数字键对应的类型是JSX.Element
  [key: number]: JSX.Element;
  '0': JSX.Element;
  '1': JSX.Element;
  '2': JSX.Element;
}

// 后续代码无需修改，step的数字类型可直接用于索引

3. 临时类型断言（应急方案）

如果只是临时解决问题，可以在索引时将step转为匹配的类型（不推荐长期使用，会跳过部分类型检查）：

const render = () => {
  const component: Types = {
    '0': <Home />,
    '1': <Create />,
    '2': <Detail />,
  }
  // 将step转为字符串，或者直接断言为接口的键类型
  return component[step.toString() as keyof Types]
}

4. 用枚举管理步骤（更易维护的进阶写法）

如果后续步骤可能扩展，用枚举统一管理步骤值会更清晰、更安全：

// 定义枚举统一管理步骤
enum Step {
  Home = 0,
  Create = 1,
  Detail = 2,
}

// 用映射类型生成对应接口
interface Types {
  [key in Step]: JSX.Element;
}

export default function Economy(props: any) {
  const [step, setStep] = useState<Step>(Step.Home)

  const render = () => {
    const component: Types = {
      [Step.Home]: <Home />,
      [Step.Create]: <Create />,
      [Step.Detail]: <Detail />,
    }
    return component[step]
  }

  return (
    <>{render()}</>
  )
}

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