Next.js中getServerSideProps执行两次且参数异常替换问题求助

可能的触发原因 #

• 浏览器自动加载source map文件：window-provider.js.map是MetaMask这类钱包扩展注入页面的window.ethereum相关代码的source map文件。本地开发时，浏览器会尝试从当前页面路径加载该map文件，而你的动态路由[address]会匹配这个文件名，从而触发第二次getServerSideProps执行。
• 动态路由未做参数过滤：Next.js动态路由默认会匹配所有非静态资源的路径请求，若没对参数做校验，会把这类静态资源请求误判为合法的路由参数。

排查与解决办法 #

1. 查看浏览器网络请求：打开F12开发者工具的Network面板，确认是否存在window-provider.js.map的请求，判断是浏览器source map加载行为还是页面内的错误引用导致。
2. 在getServerSideProps中过滤非法参数：在方法开头添加判断，排除明显不符合合约地址格式的参数，直接返回404：

export async function getServerSideProps(context) {
  const { address } = context.params;
  // 过滤.js.map这类非合约地址请求
  if (address.includes('.js.map')) {
    return { notFound: true };
  }
  // 你的原有业务逻辑
}

3. 临时禁用浏览器source map：在开发者工具设置里关闭"Enable JavaScript source maps"选项，测试是否还会触发第二次请求，验证是否是source map导致的问题。
4. 检查钱包扩展：暂时禁用MetaMask等钱包扩展，观察问题是否消失，确认是否是扩展注入代码引发的map文件请求。

重启机器后问题消失的原因 #

大概率是临时异常导致：

• 浏览器缓存了错误的source map请求路径，重启机器后缓存被清除。
• 钱包扩展进程出现异常，重启后恢复正常，不再触发异常的map文件请求。

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