NextJS路由参数异常：内部文件路径被当作providerId传入

核心原因 #

服务端组件打印两次日志，是因为开发模式下服务端收到了两次请求：一次是正常访问/basket/[providerId]的请求，另一次是React DevTools或浏览器扩展请求源映射文件（如installHook.js.map）时，请求路径被错误匹配到了你的动态路由组件。

正常情况下Next.js会优先处理/_next/static/下的静态资源请求，但以下情况可能导致路由匹配异常：

• 自定义中间件（middleware.ts）未排除静态资源路径，干扰了默认路由优先级
• Next.js 14.2.2/14.2.3版本存在开发模式下的路由匹配bug
• 自定义重写/重定向规则（next.config.js中的rewrites/redirects）导致静态资源请求被错误转发
• React DevTools版本与当前Next.js版本不兼容

排查与解决步骤 #

1. 确认请求来源
   在服务端组件中添加请求URL日志，明确第二次请求的具体路径：

   'use server'
   import { headers } from 'next/headers'
   // ...其他导入
   
   type Props = {
       params: {
           providerId: string
       }
   }
   const Page = async ({ params: { providerId } }: Props) => {
     const headersList = headers()
     console.log('当前请求URL:', headersList.get('next-url'))
     console.log('🚀 ~ Page ~ providerId:', providerId)
     // ...剩余代码
   }
   

   注意：你的路由是[providerId]，所以params中的参数名应为providerId，而非代码中的id，这是代码中的小错误，建议修正。

2. 检查中间件配置
   如果项目中有middleware.ts，确保逻辑中排除了/_next/、/api/等静态资源和内置路由，示例：

   export function middleware(request: NextRequest) {
     // 跳过静态资源和API路由
     if (request.nextUrl.pathname.startsWith('/_next/') || request.nextUrl.pathname.startsWith('/api/')) {
       return NextResponse.next()
     }
     // ...你的其他中间件逻辑
   }
   

3. 禁用浏览器扩展排查
   暂时禁用React DevTools及其他浏览器扩展，若日志恢复正常，说明是扩展请求导致的问题。可尝试更新React DevTools到最新版本，或在开发时暂时关闭扩展。

4. 清理缓存并升级Next.js

   • 删除.next文件夹和node_modules，重新安装依赖：

     rm -rf .next node_modules
     npm install
     

   • 升级到Next.js 14.2.4及以上版本，该版本修复了部分开发模式下的路由匹配bug。

5. 检查next.config.js配置
   确认rewrites/redirects规则中没有将静态资源路径重定向到/basket/[providerId]的逻辑，避免干扰默认路由处理。

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