TypeScript中如何通过key从对象动态获取React组件并解决类型报错

AI 小北

2026-10-2

问题解决方法

报错的核心原因是：你传入的key是宽泛的string类型，而 TypeScript 无法确认任意string一定是组件映射对象COMPONENTS上存在的合法键，因此触发了索引类型校验报错。

修正后的完整代码

import React from 'react'
import ComponentA from '@components/ComponentA';
import ComponentB from '@components/ComponentB';

// 先定义组件映射表，方便后续推导类型
const COMPONENTS = {
  COMPONENT_A: ComponentA,
  COMPONENT_B: ComponentB,
};

// 定义组件入参类型，限制componentKey只能是COMPONENTS的合法键
type DynamicComponentProps = {
  // 注意不要用key作为prop名，key是React的内置保留属性
  componentKey: keyof typeof COMPONENTS;
  // 如果组件需要传额外props可以在这里加可选的props字段
  componentProps?: Record<string, any>;
}

const DynamicComponent: React.FC<DynamicComponentProps> = ({componentKey, componentProps}) => {
  // 不需要useState和useEffect，直接根据prop计算要渲染的组件即可
  const TargetComponent = COMPONENTS[componentKey];
  return TargetComponent ? React.createElement(TargetComponent, componentProps) : null;
};

核心修改点说明

把原prop名key改为componentKey：key是React的内置特殊属性，用作列表渲染的唯一标识，不会被组件当做普通props接收，会导致取值异常。
用keyof typeof COMPONENTS定义componentKey的类型：自动推导组件映射表所有键的联合类型'COMPONENT_A' | 'COMPONENT_B'，从类型层面限制了传入的取值范围，保证可以安全索引COMPONENTS对象。
移除了不必要的useState和useEffect：组件选择逻辑不需要副作用和状态存储，直接根据入参计算即可，减少冗余代码和不必要的重渲染。
如果确实需要保留状态和副作用的写法，只需要给state指定React.ElementType类型替代any即可，其余类型定义逻辑和上面一致。