React+TypeScript+MUI图标类型错误：No overload matches this call

错误原因 #

1. 核心类型不匹配：React的onClick事件处理器要求函数接收MouseEvent<SVGSVGElement>类型的参数，但SWR useSWRMutation返回的trigger函数，参数定义是extraArgument?: null | undefined和可选配置项，两者参数类型完全不兼容，TypeScript因此抛出类型错误。
2. 次要类型推断混乱：错误信息里提到的component属性缺失，是因为主类型错误导致TypeScript的类型推断逻辑混乱，触发了组件重载的错误分支，并非真的需要传入component属性。

正确修复方法 #

方法一：用箭头函数直接包裹trigger #

在组件中调用logoutTrigger时，用箭头函数忽略onClick传递的事件参数，直接调用trigger：

import LogoutIcon from "@mui/icons-material/Logout";
import useLogout from "@/hooks/auth/useLogout";

const { trigger: logoutTrigger } = useLogout();

// ...

<LogoutIcon
  type="button"
  onClick={() => logoutTrigger()}
  sx={LogoutIconSx}
  cursor="pointer"
/>

箭头函数会自动接收onClick传来的鼠标事件参数但不使用，直接调用无参数的logoutTrigger，完全符合TypeScript的类型要求，无需任何断言。

方法二：在Hook内部包装trigger（更优雅） #

修改useLogout Hook，返回一个预先包装好的、兼容React事件处理器的函数，让组件调用更简洁：

const cookies = new Cookies();

const fetcher = (url: string) => axios.post(url).then((res) => res.data);

export default function useLogout() {
  const router = useRouter();

  const { trigger, error } = useSWRMutation("/logout", fetcher, {
    onSuccess: () => {
      cookies.remove(ACCESS_TOKEN_COOKIE_NAME);
      router.push("/login");
    },
  });

  // 包装trigger，返回兼容React事件的处理器
  const handleLogout = () => trigger();

  return {
    handleLogout,
    error,
  };
}

组件中直接使用包装好的函数：

import LogoutIcon from "@mui/icons-material/Logout";
import useLogout from "@/hooks/auth/useLogout";

const { handleLogout } = useLogout();

// ...

<LogoutIcon
  type="button"
  onClick={handleLogout}
  sx={LogoutIconSx}
  cursor="pointer"
/>

这种方式把类型适配逻辑封装在Hook内部，组件层无需关心细节，代码更干净。

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