React函数组件调用Props传入的toggleSideBar报错：不是函数怎么办？

核心排查与修复方案： #

• 校验父组件传参正确性
  确保父组件向Sidebar传递的toggleSideBar是一个函数，而非undefined、null或其他类型。比如避免写成<Sidebar toggleSideBar={toggleSideBar()} />（这种写法会直接执行函数并传递返回值），正确写法应为<Sidebar toggleSideBar={toggleSideBar} />。

• 添加默认值避免未传参报错
  给props设置空函数默认值，防止未传递该属性时触发错误：

  const Sidebar = ({ isOpenSidebar, toggleSideBar = () => {} }) => {
    const closeSideBar = () => {
      toggleSideBar()
    };
    // ...组件其他逻辑
  };
  

• 检查命名拼写一致性
  确认父组件传递的属性名与子组件解构的toggleSideBar完全一致，包括大小写。比如父组件若写成togglesidebar（小写s），子组件解构的toggleSideBar会拿到undefined，导致报错。

• 用类型校验提前发现问题
  借助PropTypes做强制类型校验，提前捕获参数类型错误：

  import PropTypes from 'prop-types';
  
  const Sidebar = (props) => {
    const { isOpenSidebar, toggleSideBar} = props;
    const closeSideBar = () => {
      toggleSideBar()
    };
    // ...组件其他逻辑
  };
  
  Sidebar.propTypes = {
    toggleSideBar: PropTypes.func.isRequired,
    isOpenSidebar: PropTypes.bool.isRequired
  };
  

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