如何限制React组件作为Prop的类型，让TS对错误组件报错？

我有两个组件：Media 和 Heading：

Media.tsx #

export const Media = ({ url }: { url: string }) => {
  return <img src={url} alt="media" />;
};

Heading.tsx #

export const Heading = ({ text }: { text: string }) => {
  return <h1>{text}</h1>;
};

我期望App组件仅接收Media组件作为prop：

App.tsx #

import type { ReactNode } from 'react';

export default function App({ media }: { media: ReactNode }) {
  return <div className="App">{media}</div>;
}

import { Media, Heading } from './components';
import { createRoot } from 'react-dom/client';

const media = <Media url="https://picsum.photos/200/300" />;
const heading = <Heading text="some heading" />;

const root = createRoot(document.getElementById('root')!);
root.render(<App media={media} />); // 正常通过

// 此处期望因传入Heading组件而报错
// 但实际上由于prop类型为ReactNode，不会触发错误
// ReactNode可接受任意JSX
root.render(<App media={heading} />);

问题： 在传递组件作为prop时，能否通过类型定义让TypeScript在传入错误组件时抛出错误？

当然可以，核心是缩小prop的类型范围，不再用宽泛的ReactNode，而是精准约束为Media组件的JSX实例类型。

方法1：提取Media组件的JSX元素类型 #

利用TypeScript的类型工具，直接提取Media组件对应的JSX元素类型：

import type { ReactElement } from 'react';
import { Media } from './Media';

// 精准定义Media组件的JSX实例类型
type MediaElement = ReactElement<Parameters<typeof Media>[0], typeof Media>;

export default function App({ media }: { media: MediaElement }) {
  return <div className="App">{media}</div>;
}

此时传入<Heading />，TypeScript会直接抛出类型错误，提示传入的元素不符合MediaElement类型。

方法2：直接约束组件构造函数 #

如果要更严谨，可以直接指定元素对应的组件构造函数：

import type { ReactElement } from 'react';
import { Media } from './Media';

export default function App({ media }: { media: ReactElement<{ url: string }, typeof Media> }) {
  return <div className="App">{media}</div>;
}

这种方式明确绑定了组件的props类型和构造函数，同样会在传入错误组件时触发报错。

方法3：封装复用类型 #

如果需要在多个地方使用这个约束，可以单独封装类型：

import type { ReactElement } from 'react';
import { Media } from './Media';

export type MediaComponentInstance = ReactElement<Parameters<typeof Media>[0], typeof Media>;

// 在App组件中引用
export default function App({ media }: { media: MediaComponentInstance }) {
  return <div className="App">{media}</div>;
}

原理说明 #

ReactNode是包含所有可渲染内容的宽泛类型（JSX、字符串、数字等），无法区分具体组件。而ReactElement<P, T>可以精准描述：

• P：组件接收的props类型
• T：组件的构造函数本身

通过这两个泛型参数的双重约束，TypeScript就能准确识别传入的JSX是否为目标组件的实例。

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