TypeScript中如何为useRef变量指定正确类型？

你遇到的问题是因为给MutableRefObject指定了错误的类型，导致TypeScript无法识别current是DOM元素，从而报错innerText不存在。

正确的类型设置 #

你需要将MutableRefObject的泛型参数指定为目标DOM元素的类型，这里你操作的是div元素，对应类型为HTMLDivElement；同时考虑到组件挂载前ref的current值为null，所以最终类型应该是HTMLDivElement | null：

import { MutableRefObject, useRef } from 'react';

const errorPhoneDiv: MutableRefObject<HTMLDivElement | null> = useRef(null);

或者更简洁的写法（React会自动推导MutableRefObject类型）：

const errorPhoneDiv = useRef<HTMLDivElement | null>(null);

使用时的注意事项 #

在访问current的属性前，需要先判断它是否存在，避免空值报错：

if (errorPhoneDiv.current) {
  errorPhoneDiv.current.innerText = '手机号格式错误';
}

原因说明 #

之前你指定的{}类型表示一个空对象，TypeScript无法推断出它包含innerText属性。而HTMLDivElement是浏览器div元素的内置类型，包含了所有div元素的属性和方法，完全匹配你操作innerText的需求。

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