React+TypeScript勾选条款控制按钮时出现TS2322类型错误如何解决

document.getElementById() 方法的原生返回类型为 HTMLElement | null，你直接将该值赋值给显式声明为 HTMLButtonElement 类型的变量，二者类型不匹配因此触发TS2322报错。同时你原有代码中还存在逻辑错误：将赋值运算符=错写为了相等判断运算符==，即使类型问题修复后功能也无法正常运行。

修复方案 #

方案1：类型断言+空值判断（原生DOM操作方式） #

你可以通过类型断言明确DOM节点的实际类型，同时补充空值判断避免运行时空指针报错：

const enableButton = (checkBox: HTMLInputElement ) => {
    // 增加类型断言，明确节点为HTMLButtonElement类型
    const submitButton = document.getElementById("submit_button") as HTMLButtonElement | null;
    const isChecked = checkBox.checked;
    // 先判断节点是否存在，避免空值报错
    if(submitButton) {
        // 修正为赋值运算符，可直接省略if/else简化逻辑
        submitButton.disabled = !isChecked;
    }
}

方案2：React+TS 更推荐的useRef方案 #

React开发中不建议直接调用document.getElementById操作DOM，使用useRef绑定元素更符合React设计规范，类型也天然匹配无需额外断言：

import { useRef } from 'react';

// 组件内声明按钮ref，明确指定类型为HTMLButtonElement
const submitButtonRef = useRef<HTMLButtonElement>(null);

const enableButton = (checkBox: HTMLInputElement) => {
  if(submitButtonRef.current) {
    submitButtonRef.current.disabled = !checkBox.checked;
  }
}

// JSX中绑定ref到提交按钮
<button ref={submitButtonRef} id="submit_button" disabled>提交</button>
<input type="checkbox" onChange={(e) => enableButton(e.target)} />

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