React+TypeScript嵌套使用forwardRef传递ref出现类型报错如何解决？

问题根源 #

1. 基础Select组件的属性类型定义错误：select元素对应的TS类型是React.SelectHTMLAttributes<HTMLSelectElement>，你误用了input元素专属的InputHTMLAttributes，导致ref类型合并冲突。
2. 特化组件SelectWithLargeData的自定义属性label、errors直接透传给了基础Select组件，这两个属性既不在基础Select的属性定义里，也不是原生select支持的属性，触发类型校验错误。
3. 特化组件名存在拼写错误（原代码写为SelectWitLargeData，少了字母h）。

修正后的代码 #

基础Select组件 #

import { forwardRef } from 'react';

// 替换为select专属的属性类型
type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;

const Select = forwardRef<HTMLSelectElement, Props>((props, ref) => {
    return (
        <select ref={ref} {...props}>
            <option value="">...</option>
            {props.children}
        </select>
    );
});

export default Select;

特化SelectWithLargeData组件 #

import { forwardRef } from 'react';
import Select from './select';

// 同样替换为select专属的属性类型
type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> & { label: string; errors?: string };

const SelectWithLargeData = forwardRef<HTMLSelectElement, Props>((props, ref) => {
    // 解构出自定义属性，不要透传给基础Select
    const { label, errors, ...restSelectProps } = props;
    return (
        <div>
            {/* 自定义label渲染逻辑，可根据需求调整样式 */}
            <label>{label}</label>
            <Select ref={ref} {...restSelectProps}>
                {/* 你的大量选项逻辑 */}
                <option value="AL">阿拉巴马州</option>
                <option value="AK">阿拉斯加州</option>
                {/* 其他选项 */}
            </Select>
            {/* 自定义错误提示逻辑 */}
            {errors && <span className="text-red-500">{errors}</span>}
        </div>
    );
});

export default SelectWithLargeData;

修改完后，原有的表单使用代码不需要调整，类型报错会完全消失。

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