如何为React组件值定义TypeScript Record？类型匹配问题求助

错误原因 #

你当前的COMPONENTS类型定义要求所有组件都接受WidgetProps<Widget>（即Note | ToDoList的联合类型），但实际的NoteComponent只接受WidgetProps<Note>，ToDoListComponent只接受WidgetProps<ToDoList>。

TypeScript不允许这种赋值，因为函数参数是逆变的：如果一个组件只能处理Note类型，就不能把它当成能处理任意Widget类型的组件使用——否则传入ToDoList会导致运行时错误，这是类型安全的强制限制。

正确的类型标注方案 #

方案1：用映射类型绑定类型关联 #

先建立WidgetType到具体Widget子类型的映射，让TypeScript明确每个类型的对应关系：

// 新增：建立WidgetType到具体Widget类型的映射
type WidgetTypeMap = {
  NOTE: Note;
  TODO: ToDoList;
};

// 定义组件映射的类型：每个WidgetType对应接受对应子类型props的组件
type ComponentMap = {
  [K in keyof WidgetTypeMap]: React.FC<WidgetProps<WidgetTypeMap[K]>>;
};

// 用ComponentMap类型定义COMPONENTS
const COMPONENTS: ComponentMap = {
  NOTE: NoteComponent,
  TODO: ToDoListComponent,
};

这样TypeScript会严格校验每个组件的props类型与对应WidgetType的匹配性，同时在渲染时能自动推断组件与传入widget的类型一致性。

方案2：用const断言自动推导精确类型 #

如果不需要显式定义组件映射类型，可以直接用as const让TypeScript自动推导最精确的类型：

const COMPONENTS = {
  NOTE: NoteComponent,
  TODO: ToDoListComponent,
} as const;

这种写法更简洁，TypeScript会自动识别每个键对应的组件props类型，渲染时同样能保证类型安全。

渲染代码的类型安全验证 #

使用上述两种方案后，你的渲染代码：

const Component = COMPONENTS[widget.widgetType];
return <Component widget={widget} />;

TypeScript会自动推断Component的props类型与widget的类型完全匹配，不会再出现类型错误。

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