React类组件调用useParams报Invalid hook call错误如何解决

你触发这个报错是因为同时违反了React Hook的两条核心调用规则：

1. Hook 只能在函数组件顶层/自定义Hook顶层调用，完全不支持在类组件中使用
2. 即使是在函数组件里，Hook也不能写在checkPars这类嵌套的普通函数、条件分支、循环逻辑中，必须在组件最外层作用域调用

你可以根据项目的实际情况二选一即可： #

方案1：保留类组件写法，不使用Hook #

类组件获取路由参数不需要依赖Hook，路由库本身就提供了类组件兼容的参数获取方式，直接从props中读取参数即可。

• 如果你用的是RN生态最常用的React Navigation：路由参数会自动注入到this.props.route.params中，不需要额外包裹组件，修改后的代码如下：

// 在组件挂载生命周期里触发参数校验，不要在方法内调用Hook
componentDidMount() {
  this.checkPars();
}

checkPars = () => {
  // 直接从props取路由参数，完全移除useParams调用
  const params = this.props.route?.params;
  if (params?.photoId) {
    this.setState({
      photoId: params.photoId
    });
    this.fetchComments(params.photoId);
  }
};

• 如果你用的是react-router-native做路由：使用官方提供的withRouter高阶组件包裹类组件，参数会注入到this.props.match.params中，代码如下：

import { withRouter } from 'react-router-native';

class YourPage extends React.Component {
  componentDidMount() {
    this.checkPars();
  }

  checkPars = () => {
    const params = this.props.match?.params;
    if (params?.photoId) {
      this.setState({ photoId: params.photoId });
      this.fetchComments(params.photoId);
    }
  }
}

// 包裹后导出，自动注入路由相关props
export default withRouter(YourPage);

方案2：将类组件重构为函数组件，遵循Hook调用规则 #

如果你希望继续使用Hook语法，可以把类组件改写为函数组件，注意useParams必须放在组件顶层作用域调用，不能嵌套在checkPars方法内部，参考代码：

import { useState, useEffect } from 'react';
// 导入对应路由库的useParams
import { useParams } from 'your-router-package';

const YourPage = () => {
  const [photoId, setPhotoId] = useState(null);
  // 顶层调用Hook，不要放到嵌套函数里
  const params = useParams();

  const fetchComments = (id) => {
    // 原有拉取评论的逻辑保持不变
  };

  const checkPars = () => {
    if (params?.photoId) {
      setPhotoId(params.photoId);
      fetchComments(params.photoId);
    }
  };

  // 组件挂载、参数变化时执行校验
  useEffect(() => {
    checkPars();
  }, [params]);

  return (
    // 原有组件视图逻辑
  );
};

export default YourPage;

不存在可以让Hook直接在类组件、嵌套函数里运行的黑科技写法，所有绕过Hook规则的尝试都会触发运行时错误，严格按照官方规则调用即可。

内容的提问来源于stack exchange，提问作者kofi-py