如何强制React函数组件的子元素必须包含指定属性？

问题根源：原生JSX元素会被TypeScript推断为JSX.Element（本质是React.ReactElement<any, any>），由于any类型的兼容性，即使你定义children为React.ReactElement<{ slot: "content" }>，缺少slot属性的子元素也不会触发报错。

下面是两种有效的解决方法：

方法1：使用泛型组件约束子元素Props #

通过泛型明确要求子元素的Props必须包含slot: "content"，让TypeScript准确推断子元素的实际Props类型，避免依赖宽松的any：

import React from 'react';

const Test = <P extends { slot: "content" }>(props: { 
    children: React.ReactElement<P> 
}) => {
    return <>></>;
};

// ❌ TypeScript报错：缺少slot="content"属性，类型不匹配
const invalidTest = (
    <Test>
        <span>some content</span>
    </Test>
);

// ✅ 正常通过类型检查
const validTest = (
    <Test>
        <span slot="content">some content</span>
    </Test>
);

方法2：自定义严格的元素类型 #

定义一个排除any的元素类型，强制要求Props必须包含slot: "content"，同时兼容原生元素和自定义组件的Props：

import React from 'react';

type SlotContentElement = React.ReactElement<{ slot: "content" } & React.HTMLAttributes<HTMLElement>>;

const Test = (props: { 
    children: SlotContentElement 
}) => {
    return <>></>;
};

// ❌ TypeScript报错：类型不匹配
const invalidTest = (
    <Test>
        <span>some content</span>
    </Test>
);

// ✅ 正常通过类型检查
const validTest = (
    <Test>
        <span slot="content">some content</span>
    </Test>
);

两种方法的核心逻辑都是避免any类型的宽松兼容，让TypeScript能准确校验子元素的Props是否符合要求。

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