React+TypeScript中onClick事件报错：期望1个参数，实际传0个

首先明确报错的核心原因：你把handleClick的类型标注为React.Dispatch<React.SetStateAction<boolean>>，但这个类型的函数必须接收一个参数（可以是布尔值，或者接收当前状态返回布尔值的函数）。而你在组件里调用handleClick()时没有传参，同时传入的实际回调() => setMenuState(false)是一个无参函数，完全不符合Dispatch类型的要求，所以才会报错。

另外你提到的react-icons和这个问题无关，报错的根源是类型定义与实际使用不匹配，和图标组件没关系。

下面给出两种可行的解决方案：

方案一：直接定义无参回调类型（推荐，符合你的实际使用场景） #

你的实际需求是点击NavLink时执行一个无参操作，直接把IProps里的handleClick类型改成无参函数即可：

interface IProps {
    handleClick: () => void; // 改成无参函数类型
    icon?: JSX.Element;
}

const NavLinks: React.FC<IProps> = ({ handleClick }) => (
    <div className="sidebar_navlinks">
        {sidebar_links.map((link) => (
            <NavLink key={link.name} to={link.to} onClick={() => handleClick()}>
                <div className="link">
                    <link.icon className="icon" />
                    {link.name}
                </div>
            </NavLink>
        ))}
    </div>
)

组件使用方式保持不变：

<NavLinks handleClick={() => setMenuState(false)} />

这种方式最贴合你的使用场景，因为你不需要在子组件里控制setState的具体值，只是触发父组件传来的固定操作。

方案二：保留Dispatch类型（适合需要在子组件动态修改状态的场景） #

如果你确实需要在子组件里决定setState的值，那就要严格遵循Dispatch类型的要求：

1. 调整组件调用方式，直接传入setMenuState（而不是包裹一层无参函数）：

<NavLinks handleClick={setMenuState} />

2. 在子组件里调用时必须传入参数：

const NavLinks: React.FC<IProps> = ({ handleClick }) => (
    <div className="sidebar_navlinks">
        {sidebar_links.map((link) => (
            <NavLink key={link.name} to={link.to} onClick={() => handleClick(false)}>
                <div className="link">
                    <link.icon className="icon" />
                    {link.name}
                </div>
            </NavLink>
        ))}
    </div>
)

这样类型就能完全匹配，因为setMenuState本身就是React.Dispatch<React.SetStateAction<boolean>>类型，调用时传入false也符合参数要求。

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