Next.js中Window点击事件处理器的TypeScript类型报错问题

问题核心 #

你的代码逻辑正常，但TypeScript报错有两个核心原因：

• 原生DOM事件的event.target类型为EventTarget | null，而HTMLDivElement.contains()要求参数是Node | null，两者类型不兼容
• 使用React封装的MouseEvent类型（如React.MouseEvent<Window>）会和原生DOM事件的类型冲突，导致重载匹配错误

正确解决方案 #

1. 使用原生DOM的MouseEvent类型 #

给事件处理器的参数指定原生DOM的MouseEvent类型（而非React合成事件类型），这完全符合window.addEventListener的类型要求。

2. 安全处理event.target类型 #

通过类型断言或类型守卫，确认event.target是Node类型后再传入contains()方法。

方案一：类型断言（简洁版）

const keyboard = useRef<HTMLDivElement>(null);

useEffect(() => {
    if (!showKeyboard) return;

    function hideKeyboard(event: MouseEvent) {
        if (keyboard.current && event.target) {
            // 将event.target断言为Node类型
            const targetNode = event.target as Node;
            if (!keyboard.current.contains(targetNode)) {
                setShowKeyboard(false);
            }
        }
    }

    window.addEventListener('click', hideKeyboard);
    return () => window.removeEventListener('click', hideKeyboard);
}, [showKeyboard]);

方案二：类型守卫（更严谨）

如果不想用直接断言，可以自定义类型守卫来验证event.target的类型：

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

const keyboard = useRef<HTMLDivElement>(null);

useEffect(() => {
    if (!showKeyboard) return;

    function hideKeyboard(event: MouseEvent) {
        if (keyboard.current && isNode(event.target)) {
            if (!keyboard.current.contains(event.target)) {
                setShowKeyboard(false);
            }
        }
    }

    window.addEventListener('click', hideKeyboard);
    return () => window.removeEventListener('click', hideKeyboard);
}, [showKeyboard]);

错误原因说明 #

• React合成事件类型不适用：React.MouseEvent是React封装的事件对象，仅能用于React组件的事件回调（如<button onClick={handler}>），不能直接用于原生DOM的addEventListener，否则会触发重载不匹配错误。
• Event类型太宽泛：直接用Event作为参数类型时，event.target的类型是EventTarget | null，而EventTarget并不包含Node的所有属性，所以无法通过contains()的类型检查。

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