useEffect实现自定义事件监听Hook报TS类型错误如何解决

你遇到的报错和逻辑问题来自3个核心错误：

• 类型层面：TypeScript默认内置的WindowEventMap类型只包含浏览器原生支持的事件，没有你自定义的myEvent事件定义，所以会提示事件名不合法。
• 逻辑层面：useEffect里的判断条件if (!window || !window.addEventListener || myEvent) return存在错误，myEvent是useRef返回的ref容器对象，永远为真值，会导致后续事件注册逻辑永远不执行。
• 概念层面：你混淆了React合成事件和原生DOM事件的概念，同时ref的用法完全错误：
  1. 绑定在window上的自定义事件是原生DOM事件，不属于React的SyntheticEvent（合成事件）体系，类型标注错误。
  2. 你给ref标注的类型是SyntheticEvent | null，也就是把ref当成事件对象的存储容器，但代码里又写myEvent.current(event)把ref值当函数调用，类型和用法完全不匹配。

第一步：扩展TS类型定义 #

先在项目的全局类型声明文件（比如global.d.ts）里扩展WindowEventMap，让TS识别你的自定义事件：

declare global {
  interface WindowEventMap {
    // 泛型里填自定义事件detail携带的数据类型，没有数据可以填never
    myEvent: CustomEvent<{ payload?: any }>;
  }
}

export {};

第二步：修正Hook逻辑 #

ref用来存储最新的事件回调，避免因为闭包问题导致拿到旧的状态，同时修正事件绑定/解绑逻辑：

import { useEffect, useRef } from 'react';

type MyEventHandler = (e: WindowEventMap['myEvent']) => void;

export const useMyEvent = (handler: MyEventHandler) => {
  // 存储最新的回调函数
  const handlerRef = useRef<MyEventHandler>(handler);

  // 每次传入的handler更新时，同步到ref
  useEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  useEffect(() => {
    // 兼容SSR场景，非浏览器环境直接返回
    if (typeof window === 'undefined') return;

    const listener = (e: WindowEventMap['myEvent']) => {
      handlerRef.current(e);
    };

    window.addEventListener('myEvent', listener);
    return () => {
      window.removeEventListener('myEvent', listener);
    };
  }, []);
};

export default useMyEvent;

使用示例 #

// 在组件中调用
useMyEvent((e) => {
  console.log('接收到自定义事件，携带数据：', e.detail);
});

• 如果你是通过window.dispatchEvent(new CustomEvent('myEvent', { detail: {} }))触发事件，一定要用CustomEvent类型，不要用React合成事件类型。
• 如果你的自定义事件是React事件系统触发的，不要绑定在window上，直接在对应React元素上通过onMyEvent的props传递即可，不需要手动操作DOM监听。

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