React forwardRef中useRef类型不兼容报错原因及解决方法

错误含义 #

这个TypeScript报错的核心是ref类型不兼容：

• 你声明的handleRef是MutableRefObject<HTMLInputElement | undefined>类型，它的current属性可能是输入元素或undefined
• 但React要求DOM元素的ref必须是RefObject<HTMLInputElement>类型，其current只能是输入元素或null（React在DOM卸载时会自动把ref的current设为null，而非undefined）
• TypeScript中undefined和null是不同类型，因此出现类型不匹配的报错

修复方案 #

最标准的修复方式是对齐React的ref类型规范，调整handleRef的泛型和初始值：

const InputElement = React.forwardRef((props: any, ref) => {
    // 将泛型改为HTMLInputElement | null，初始值设为null
    const handleRef = React.useRef<HTMLInputElement | null>(null)
    React.useImperativeHandle(ref, () => ({
        setChecked(checked: boolean) {
            if (handleRef.current) {
                handleRef.current.checked = checked;
            }
        }
    }), []);
    return (
        <input ref={ handleRef } type="checkbox" />
    )
})

如果非要保留undefined类型（不推荐，会绕过类型检查），可以用类型断言强制转换：

// 仅作示例，不推荐使用
return (
    <input ref={ handleRef as React.RefObject<HTMLInputElement> } type="checkbox" />
)

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