React TypeScript使用useRef时报string不可分配给HTMLInputElement错误如何解决

问题核心原因 #

你对React DOM Ref的作用和类型推断逻辑理解有误：

• 绑定到<input />这类原生DOM元素的ref，React会在组件挂载后自动将其current属性覆盖为对应的HTMLInputElement DOM节点实例，你传入的初始值仅会在组件未挂载阶段生效，挂载后会被直接替换。
• TypeScript会根据你给useRef传入的初始值自动推断ref的类型：
  1. 你初始传null时，TS推断类型为MutableRefObject<HTMLInputElement | null>，和<input />要求的LegacyRef<HTMLInputElement>类型兼容，所以不报错。
  2. 你初始传字符串类型的SomeObject.name时，TS直接推断ref类型为MutableRefObject<string>，和要求的DOM节点类型完全不匹配，因此抛出TS2322错误。

正确解决方案 #

你本质需求是给firstName输入框设置默认值，完全不需要修改ref的初始值，直接用input原生的defaultValue属性即可：

// ref保持原用法，添加泛型明确类型
const firstName = React.useRef<HTMLInputElement>(null);
const lastName = React.useRef<HTMLInputElement>(null);

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  const data = {
    // 加可选链避免空值报错
    firstName: firstName.current?.value ?? '',
    lastName: lastName.current?.value ?? '',
  }
  const formdata = JSON.stringify(data);
  history.push({
    pathname: '/review',
    state: { details: formdata }
  });
}

// 表单input添加defaultValue设置默认值
<form onSubmit={handleSubmit}>
    <input 
      type="text" 
      className="form-control" 
      ref={firstName} 
      name="firstName" 
      id="firstName"
      defaultValue={SomeObject.name}
    />
    <input 
      type="text" 
      className="form-control" 
      ref={lastName} 
      name="lastName" 
      id="lastName"
    />
</form>

如果你确实需要单独存储SomeObject.name这个静态值，直接单独声明变量即可，不要和DOM Ref混用，避免类型混乱。

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