React+TypeScript中绑定点击事件获取target.id触发类型错误的技术问询

这个问题我之前在项目里也碰到过，TypeScript的严格类型检查在这里确实容易让人卡壳。咱们先搞清楚为什么会报错，再看几种靠谱的解决办法：

问题根源 #

e.target的类型是EventTarget | null，但不是所有EventTarget都自带id属性（比如某些SVG元素或自定义元素），所以TypeScript会阻止你直接访问id。另外要注意：target是实际触发事件的元素——如果用户点击的是子元素#modal-content，那e.target指向的就是这个子div，而非绑定事件的父元素。

解决方案1：用currentTarget代替target（最推荐） #

如果你的逻辑是点击整个#modal-window区域（包括子元素）就触发关闭，那currentTarget是最优选择——它始终指向注册事件的那个元素（也就是你绑定onClick的div#modal-window），类型明确为HTMLElement，直接就能访问id：

const closeWindow = (e: React.MouseEvent<HTMLElement>) => { 
  if (e.currentTarget.id === 'modal-window') {
    // 这里写你的关闭逻辑
  }
}

解决方案2：给target做类型断言（适合明确场景） #

如果你需要区分点击的是父元素还是子元素，可以通过类型断言告诉TypeScript：这个target就是HTMLElement：

const closeWindow = (e: React.MouseEvent<HTMLElement>) => { 
  const targetElement = e.target as HTMLElement;
  if (targetElement.id === 'modal-window') {
    // 你的逻辑
  }
}

解决方案3：更严谨的类型守卫（适合复杂场景） #

如果想让代码更健壮，避免潜在的类型错误，可以写一个类型守卫函数来检查target是否为HTMLElement：

// 自定义类型守卫，判断目标是否为HTMLElement
function isHTMLElement(target: EventTarget | null): target is HTMLElement {
  return target !== null && typeof target === 'object' && 'id' in target;
}

const closeWindow = (e: React.MouseEvent<HTMLElement>) => { 
  if (isHTMLElement(e.target) && e.target.id === 'modal-window') {
    // 执行你的逻辑
  }
}

这样写的好处是，TypeScript会在类型守卫通过后自动推断e.target的类型为HTMLElement，同时也规避了null或非HTML元素的情况。

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