Next.js 配置SEO友好美化URL时传递查询ID参数异常问题

问题根源 #

你当前的问题是Next.js Pages Router下动态路由的参数覆盖逻辑导致的：你定义的动态路由路径是/product/[id]，Link组件as属性中路径的最后一段会自动映射为id动态参数，直接覆盖你在href.query中传入的id值，因此最终拿到的router.query.id是slug值而非真实产品ID。

解决方案 #

最规范的实现方式是调整动态路由的参数命名，把slug作为路径匹配参数，真实ID作为额外查询参数传递，步骤如下：

1. 修改页面文件路径，将product/[id]/index.js重命名为product/[slug]/index.js
2. 调整Link组件的传参逻辑：

<Link 
  as={`/product/${slug}`} 
  href={{
    pathname: `/product/[slug]`, 
    query: {
      slug: slug,
      id: idkey // 此处传入真实产品ID 121122-001
    }
  }}
>
  <Button disableElevation size="small" className={classes.button} variant="contained" color="primary" onClick={(event) => { return true }}>Solicitar Disponibilidax</Button>
</Link>

3. 页面中获取参数的逻辑保持不变即可：

const { id } = router.query

此时拿到的id就是你预期的121122-001，URL仍然显示为/product/usb-mouse-black，满足SEO美化需求。

如果不想修改现有页面文件名，也可以直接新增一个自定义查询参数传真实ID，调整Link的href.query如下：

href={{
  pathname: `/product/[id]`, 
  query: {
    id: slug,
    productId: idkey // 新增参数传递真实ID
  }
}}

页面获取参数时改为取router.query.productId即可，该方案改造成本更低，但参数命名不如前者直观。

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