Next.js(TypeScript)中窗口外部点击监听的类型错误解决

错误1：Parameter 'event' implicitly has an 'any' type. #

给事件参数明确指定类型即可，根据监听的事件类型选择：

• 若保留keydown事件，类型为KeyboardEvent
• 若实现外部点击逻辑，应该监听click事件，对应类型为MouseEvent

错误2：Property 'contains' does not exist on type 'never'. #

这是因为创建的ref未指定类型，TypeScript无法推断其类型，默认返回never。需要在创建ref时明确指定元素类型（比如HTMLElement）。

完整修正代码（适配外部点击需求） #

import { useEffect, useRef, useState } from 'react';

// 组件内的状态
const [navActive, setNavActive] = useState(true);
// 给ref指定HTMLElement类型，初始值为null
const ref = useRef<HTMLElement>(null);

useEffect(() => {
  // 给event指定MouseEvent类型
  const handleOutSideClick = (event: MouseEvent) => {
    // 先判断ref.current存在，再将event.target断言为Node（contains是Node接口的方法）
    if (ref.current && !ref.current.contains(event.target as Node)) {
      setNavActive(false);
    }
  };

  // 监听window的click事件（替换keydown，匹配外部点击逻辑）
  window.addEventListener('click', handleOutSideClick, false);
  
  // 清理函数移除监听
  return () => {
    window.removeEventListener('click', handleOutSideClick, false);
  };
}, [ref]);

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