如何为泛型React组件定义类型？TypeScript类型安全适配求助

我在定义类型时遇到了困难，现有代码及问题如下：

现有代码 #

枚举与泛型帖子类型 #

export enum PostKind {
  Message = "message",
  Food = "food",
}

export type IPost<T extends PostKind> = {
  type: T;
  content: PostContent<T>; // 暂不包含该类型代码，因当前无关
};

扩展的特定帖子类型 #

export type IMessagePost = IPost<PostKind.Message> & {
  messageLength: number;
};

// 注：原代码此处泛型参数错误，已修正为PostKind.Food
export type IFoodPost = IPost<PostKind.Food> & {
  image: string;
};

对应组件 #

export const MessagePost = (props: IMessagePost) => {
  return <div>{props.messageLength}</div>;
};

export const FoodPost = (props: IFoodPost) => {
  return <div>{props.image}</div>;
};

问题代码 #

尝试实现泛型Post组件时，TypeScript报错：

const componentMap: Record<
  PostKind,
  React.FC<IMessagePost> | React.FC<IFoodPost>
> = {
  [PostKind.Message]: MessagePost,
  [PostKind.Food]: FoodPost,
};

export const Post = (props: IPost<PostKind>) => {
  const Component = componentMap[props.type];
  return <Component {...props} />; // TypeScript报错：Type 'PostKind' is not assignable to type 'PostKind.Message'
};

报错信息：

Type '{ type: PostKind; }' is not assignable to type 'IPost<PostKind.Message>'.
  Types of property 'type' are incompatible.
    Type 'PostKind' is not assignable to type 'PostKind.Message'.

要求：完全类型安全实现，禁止使用unknown、any、ElementType、ReactNode或as关键字。

解决方案 #

核心是建立PostKind、帖子类型、组件三者的严格类型关联，让TypeScript能准确推断类型匹配关系。

步骤1：统一特定帖子类型联合 #

先定义所有特定帖子类型的联合类型，方便后续类型推导：

export type SpecificPost = IMessagePost | IFoodPost;

步骤2：给组件映射添加严格类型约束 #

使用映射类型，让每个PostKind键对应唯一的组件类型，而非松散的联合类型：

const componentMap: {
  [K in SpecificPost['type']]: React.FC<Extract<SpecificPost, { type: K }>>
} = {
  [PostKind.Message]: MessagePost,
  [PostKind.Food]: FoodPost,
};

步骤3：实现泛型Post组件 #

让组件接收泛型参数，确保传入的Props属于具体的特定帖子类型，而非宽泛的IPost<PostKind>：

export const Post = <T extends SpecificPost>(props: T) => {
  const Component = componentMap[props.type];
  return <Component {...props} />;
};

完整可运行代码 #

import React from 'react';

export enum PostKind {
  Message = "message",
  Food = "food",
}

// 补全PostContent类型以确保类型完整性
type PostContent<T extends PostKind> = 
  T extends PostKind.Message ? string :
  T extends PostKind.Food ? { name: string; calories: number } :
  never;

export type IPost<T extends PostKind> = {
  type: T;
  content: PostContent<T>;
};

export type IMessagePost = IPost<PostKind.Message> & {
  messageLength: number;
};

export type IFoodPost = IPost<PostKind.Food> & {
  image: string;
};

export type SpecificPost = IMessagePost | IFoodPost;

export const MessagePost = (props: IMessagePost) => {
  return <div>{props.messageLength}</div>;
};

export const FoodPost = (props: IFoodPost) => {
  return <div>{props.image}</div>;
};

const componentMap: {
  [K in SpecificPost['type']]: React.FC<Extract<SpecificPost, { type: K }>>
} = {
  [PostKind.Message]: MessagePost,
  [PostKind.Food]: FoodPost,
};

export const Post = <T extends SpecificPost>(props: T) => {
  const Component = componentMap[props.type];
  return <Component {...props} />;
};

原理说明 #

• SpecificPost联合类型确保所有帖子类型被完整覆盖；
• 组件映射使用Extract<SpecificPost, { type: K }>，精准提取对应PostKind的帖子类型，让每个键值对类型严格绑定；
• 泛型Post组件通过T extends SpecificPost约束，让TypeScript能根据传入的具体Props推断出对应的PostKind，进而匹配到正确的组件，彻底解决类型不兼容问题。

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