React传递自定义标题组件遇TS2604错误，求解决方法

这个错误的核心原因是TypeScript无法正确识别解构出来的TitleElement的JSX元素构造签名，尤其是当它可能是原生HTML标签字符串时。以下是可行的修正方案：

方案1：简化类型并通过变量中转使用 #

直接简化TitleElement的类型定义，并将其赋值给新变量后再作为JSX标签使用，帮助TypeScript正确推断类型：

import React from 'react';

interface IPropsCategory { 
    title: string;
    TitleElement?: React.ElementType;
}

export const Category: React.FC<IPropsCategory> = ({ 
    children, 
    title, 
    TitleElement = 'h3' 
}) => {
    // 赋值给新变量，让TypeScript正确识别其构造签名
    const Heading = TitleElement;
    return (
        <CategoryContainer>
            <Heading>{title}</Heading>
            {children}
        </CategoryContainer>  
    );
};

// 假设你定义的CategoryContainer组件
const CategoryContainer = ({ children }: { children: React.ReactNode }) => (
    <div className="category-container">{children}</div>
);

方案2：配合defaultProps的严谨写法 #

如果偏好使用defaultProps，可以将TitleElement设为必填类型，再通过defaultProps提供默认值，并添加as const确保类型匹配：

import React from 'react';

interface IPropsCategory { 
    title: string;
    TitleElement: React.ElementType;
}

export const Category: React.FC<IPropsCategory> = ({ children, title, TitleElement }) => {
    const Heading = TitleElement;
    return (
        <CategoryContainer>
            <Heading>{title}</Heading>
            {children}
        </CategoryContainer>  
    );
};

Category.defaultProps = {
    TitleElement: 'h3',
} as const;

关键说明 #

• React.ElementType已经涵盖了所有合法的JSX元素类型：原生HTML标签（如'h3'）、函数组件、类组件，无需额外添加React.FunctionComponent，避免类型冗余。
• 将TitleElement赋值给新变量是解决类型推断问题的关键，TypeScript对直接使用解构变量作为JSX标签的类型推断存在局限性，中转变量后可正常识别构造签名。

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