React+TypeScript中e.target.id报错：EventTarget类型无id属性

这个报错的核心原因是：e.target的类型是通用的EventTarget，它是所有DOM元素的基类，并不保证存在id属性——比如如果按钮内部嵌套了其他元素（比如<span>），点击子元素时e.target会指向那个子元素，而非按钮本身。而你定义的事件类型是React.MouseEvent<HTMLButtonElement>，绑定事件的元素是按钮，此时e.currentTarget才是准确指向这个按钮的对象，它的类型明确是HTMLButtonElement，天然包含id属性。

推荐两种解决方式：

方式一：使用 e.currentTarget.id（首选） #

直接替换成currentTarget，TS能正确推断类型，不会报错，而且逻辑更准确：

function handleButtonClick(e: React.MouseEvent<HTMLButtonElement>) {
  someOperation(e.currentTarget.id)
}

方式二：类型断言 e.target（谨慎使用） #

如果你确定触发事件的元素一定是按钮本身（按钮内部没有子元素），可以手动给e.target做类型断言：

function handleButtonClick(e: React.MouseEvent<HTMLButtonElement>) {
  const button = e.target as HTMLButtonElement;
  someOperation(button.id)
}

注意：如果按钮内部有子元素，这种写法可能会导致实际运行时的类型不匹配问题，所以优先选第一种方式。

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