React中useRef绑定DOM元素时编译报错的类型兼容疑问

错误原因 #

当你用useRef<HTMLDivElement>()声明ref时，由于未传入初始值，TypeScript会推断current的类型为HTMLDivElement | undefined。但React中DOM元素的ref属性要求current的类型是HTMLDivElement | null——React在组件挂载前或卸载后会把ref的current设为null，而undefined和null在TypeScript中是不同类型，因此出现类型不兼容的编译错误。

解决方法 #

有两种常用的正确写法：

方法一：初始化时传入null并明确类型 #

直接将ref初始化为null，同时指定泛型类型为HTMLDivElement | null，让current的类型完全匹配React的要求：

import { useRef } from 'react'

export function Test() {
  const ref = useRef<HTMLDivElement | null>(null)
  return <div ref={ref} />
}

这种写法最安全，完全符合React的生命周期行为，后续访问ref.current时需要处理null的情况，避免运行时错误。

方法二：使用非空断言（谨慎使用） #

如果你能确保ref一定会被DOM元素赋值（比如组件渲染时该div必然存在），可以用非空断言null!告诉TypeScriptcurrent不会是null：

import { useRef } from 'react'

export function Test() {
  const ref = useRef<HTMLDivElement>(null!)
  return <div ref={ref} />
}

注意：这种写法会跳过TypeScript的空值检查，如果后续ref.current实际为null时访问它，会导致运行时错误，仅在确定ref必然被赋值的场景下使用。

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