Next.js中getStaticProps多次调用且params出现[object Object]问题排查

可能成因 #

• getStaticPaths 返回格式错误：如果返回的 paths 数组中，某个 params.postId 被赋值为对象而非字符串，Next.js 会将对象自动转为字符串 [object Object]，进而触发异常的 getStaticProps 调用。
• getStaticProps/页面组件逻辑错误：内部处理 params 时出现赋值错误，比如误将整个 params 对象赋值给 postId，或者调用后端API时错误传递了参数。
• Next.js 版本bug：部分旧版本在动态路由静态生成逻辑中存在缺陷，可能导致重复调用并出现参数异常。

解决办法 #

• 校验 getStaticPaths 返回格式：确保每个路径的 params 都是字符串键值对，示例正确写法：

  export async function getStaticPaths() {
    // 假设从后端获取所有postId列表
    const posts = await fetchPosts();
    const paths = posts.map(post => ({
      params: { postId: post.id.toString() } // 确保是字符串类型
    }));
  
    return { paths, fallback: false };
  }
  

• 排查 getStaticProps 参数处理：确认正确解构 params，避免错误赋值：

  export async function getStaticProps({ params }) {
    // 正确解构postId
    const { postId } = params;
    // 调用API时传递正确的字符串参数
    const post = await fetchPostById(postId);
  
    return { props: { post } };
  }
  

• 检查页面组件额外逻辑：排查是否在组件的 useEffect 或其他生命周期中重复调用API，且传递了错误参数（比如误传整个对象）。
• 升级Next.js版本：如果使用较旧版本，尝试升级到最新稳定版，排除已知的静态生成bug。

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