TypeScript函数式组件传递函数参数报错，如何解决？

云原生阿岚

2026-8-5

问题解决方法

错误根源

React函数式组件的参数是单个props对象，而非独立的多个参数。你的Sample组件写法把第一个参数当成了handleDrawerToggle，但实际它接收的是包含所有传入属性的props对象，导致：

handleDrawerToggle被赋值为整个props对象，而非预期的函数，触发Expected onClick listener to be a function错误
drawerWidth参数实际是undefined，因为没有传入第二个参数

修正后的代码

// Typescript
const App = () => {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const drawerWidth = 240;
  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };
  return (
    <div>
      <Sample
        handleDrawerToggle={handleDrawerToggle}
        drawerWidth={drawerWidth}
      />
      {mobileOpen && <h1>hello</h1>}
    </div>
  );
};

// 写法1：直接解构并定义props类型
const Sample = ({ handleDrawerToggle, drawerWidth }: {
  handleDrawerToggle: () => void;
  drawerWidth: number;
}) => {
  return (
    <div>
      <button onClick={handleDrawerToggle} style={{ width: `${drawerWidth}px` }}>
        Test
      </button>
    </div>
  );
};

// 写法2：定义Props类型别名（更推荐，可读性更高）
type SampleProps = {
  handleDrawerToggle: () => void;
  drawerWidth: number;
};

const Sample = ({ handleDrawerToggle, drawerWidth }: SampleProps) => {
  return (
    <div>
      <button onClick={handleDrawerToggle} style={{ width: `${drawerWidth}px` }}>
        Test
      </button>
    </div>
  );
};