修复遍历对象创建React组件时的类型定义问题

1. BlockMap类型定义是否正确？ #

不正确。你当前用Record<BlockType, JSX.Element>定义的是渲染后的React元素类型，但实际存在blockMap里的是React组件（可用于渲染的函数/类），类型完全不匹配。

正确的类型应该使用React.ComponentType，它是React内置的、用于表示所有可接收props并返回JSX的组件类型。如果要更精准匹配你的组件props，可以指定具体的props结构：

type BlockMap = Record<BlockType, React.ComponentType<{
  className?: string;
  block: Block;
}>>;

2. ResolvedBlock应该使用什么类型？ #

修正BlockMap类型后，ResolvedBlock的类型会被TypeScript自动推导为React.ComponentType<{ className?: string; block: Block }>，不需要手动声明。如果一定要显式指定，直接写这个类型即可：

const ResolvedBlock: React.ComponentType<{ className?: string; block: Block }> = blockMap[block._type];

3. 不改变现有结构的前提下，更优的类型编写方式？ #

可以通过细分Block子类型提升类型安全性，同时完全保留你原有的映射渲染逻辑：

第一步：拆分Block为各类型专属接口 #

先定义基础Block属性，再为每个组件类型扩展专属属性，让TypeScript能区分不同类型的Block：

type BlockType =
  | 'imageBlock'
  | 'formBlock'
  | 'statisticBlock'
  | 'videoBlock'
  | 'quoteBlock';

// 所有Block共享的基础属性
interface BaseBlock {
  _key: string;
  heading?: string;
  backgroundColor?: string;
  theme?: 'dark' | 'light';
}

// 图片块专属属性
interface ImageBlockData extends BaseBlock {
  _type: 'imageBlock';
  imageUrl: string;
}

// 表单块专属属性
interface FormBlockData extends BaseBlock {
  _type: 'formBlock';
  formFields: string[];
}

// 其他类型的Block同理扩展...
type Block = ImageBlockData | FormBlockData | StatisticBlockData | VideoBlockData | QuoteBlockData;

第二步：让BlockMap对应组件接收精准props #

给每个组件定义专属的props类型，再让BlockMap的每个键对应匹配的组件类型：

// 各组件的props类型
type ImageBlockProps = {
  className?: string;
  block: ImageBlockData;
};

type FormBlockProps = {
  className?: string;
  block: FormBlockData;
};

// 精准的BlockMap类型
type BlockMap = {
  imageBlock: React.ComponentType<ImageBlockProps>;
  formBlock: React.ComponentType<FormBlockProps>;
  statisticBlock: React.ComponentType<{ className?: string; block: StatisticBlockData }>;
  videoBlock: React.ComponentType<{ className?: string; block: VideoBlockData }>;
  quoteBlock: React.ComponentType<{ className?: string; block: QuoteBlockData }>;
};

// 赋值时TypeScript会自动校验组件是否匹配对应props
const blockMap: BlockMap = {
  imageBlock: ImageBlock,
  formBlock: FormBlock,
  statisticBlock: StatisticBlock,
  videoBlock: VideoBlock,
  quoteBlock: QuoteBlock,
};

第三步：保留原有渲染逻辑，获得类型校验 #

此时在渲染时，TypeScript会自动识别当前block的具体类型，确保传给对应组件的block props完全匹配，避免属性传错的问题，同时你的映射渲染逻辑不需要做任何改动。

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