React中useRef调用click报错：Property 'click' does not exist on type 'never'

问题原因 #

TypeScript无法自动推断useRef的类型，当你初始化useRef(null)且未指定泛型时，current属性会被推断为never类型，导致调用click()方法时触发类型错误。另外你的组件return返回了两个同级元素，这在React中是不允许的，也需要修复。

解决方案 #

1. 给useRef指定泛型类型HTMLInputElement | null，明确引用的是input元素
2. 把return中的两个元素包裹在一个容器（如<div>或<>Fragment）中

修改后的完整代码 #

function Dropzone(props: propType) {
    // 指定泛型类型为HTMLInputElement | null
    const fileInputRef = useRef<HTMLInputElement | null>(null);

    function handleClick(){
        fileInputRef.current?.click()
    }

    return (
        // 用Fragment包裹同级元素
        <>
            <p onClick={()=>handleClick()} className='mt-2 cursor-pointer text-sky-800'>Browse on your computer</p>
            <input type="file" className='hidden' ref={fileInputRef} />
        </>
    )
}

额外说明 #

• 使用HTMLInputElement作为泛型类型，让TypeScript识别引用的是input DOM元素，从而允许调用click()方法
• 可选链操作符?.确保当current为null时不会抛出运行时错误
• React组件的return必须只有一个根节点，用<>（短语法Fragment）包裹可避免生成额外DOM节点

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