getStaticPaths函数参数异常咨询：已将id转换为字符串仍提示必填参数未以字符串形式提供

Hey，我帮你排查下代码里的问题——虽然你已经做了toString()转换，但报错其实是由其他代码错误引发的连锁反应，我把关键问题和修正方案整理如下：

问题1：getStaticProps里的请求路径错误 #

你已经从context.params解构出了id变量，但在fetch URL里误用了params.id（这个params变量根本没定义），这会导致请求失败，进而让Next.js检测到参数传递异常。应该直接用你已经定义好的id变量。

问题2：组件内的变量名不匹配 #

你的组件接收的props是users，但JSX里写的是mobile.name，这明显是笔误，会导致渲染报错，也可能干扰参数检测逻辑。

问题3：变量命名混淆（可选优化） #

在getStaticPaths的map回调里，你把单个用户对象命名为users，和组件props的users（单个用户数据）重名了，虽然不影响功能，但容易造成阅读混淆，建议改成user。

修正后的完整代码：

export default function UsersID({ users }) {
  return (
    <div>
      <h1>{users.name}</h1>
    </div>
  );
}

export const getStaticPaths = async () => {
  const res = await fetch(`http://jsonplaceholder.typicode.com/users`);
  const data = await res.json();
  // 把回调参数从users改成user，避免命名混淆
  const paths = data.map((user) => {
    return { params: { id: user.id.toString() } };
  });
  return { paths, fallback: false };
};

export const getStaticProps = async (context) => {
  const id = context.params.id;
  // 使用已定义的id变量，替换不存在的params.id
  const res = await fetch(`http://jsonplaceholder.typicode.com/users/${id}`);
  const data = await res.json();
  return { props: { users: data } };
};

另外给你个小建议：开启项目里的ESLint（Next.js默认支持），它能实时帮你检测出未定义变量、变量不匹配这类低级错误，节省排查时间~

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