Next.js路由参数为何有时显式定义仍解析为null？

问题背景 #

使用动态路由/stream/[provider]/[streamerId]/index.tsx时，访问合法路由（如/stream/YouTube/ucyazpsxowcye_ffhs-jurcw）页面可正常加载，但控制台持续出现/stream/YouTube/null的404错误。已在getServerSideProps中添加字符串"null"的检查逻辑：

if (!streamerId || streamerId === "null") {
  return {
    notFound: true,
  };
}

服务器日志显示pathName偶尔会变为/stream/YouTube/null，需要彻底消除这类异常请求。

排查与修复方案 #

1. 定位异常请求的来源 #

全局搜索项目中所有涉及/stream/路由拼接的代码，重点排查：

• 组件内router.push/router.replace的调用逻辑，确认streamerId在非空状态下才执行跳转
• 静态资源、API请求的URL拼接场景，避免未检查streamerId就生成请求路径：

  // 错误示例：未做非空检查
  fetch(`/api/stream/${provider}/${streamerId}`)
  // 修复后
  if (streamerId && streamerId !== "null") {
    fetch(`/api/stream/${provider}/${streamerId}`)
  }
  

2. 服务器端提前拦截异常路由 #

在server/index.js的中间件中，直接拦截包含/null的异常路由请求，无需进入Next.js处理流程：

app.get(
  "*",
  syncMuid,
  syncLocaleAndRoute,
  addSecurityHeaders,
  cacheMiddleware,
  (req, res) => {
    const { path: pathName } = req;
    // 拦截stream路由下带null的异常请求
    if (pathName.includes("/stream/") && pathName.includes("/null")) {
      return res.status(404).send("Not Found");
    }
    console.log("pathname--------------", pathName);
    console.log("query-----------------", req.query);
    return nextHandler(req, res);
  }
);

3. 客户端路由守卫强化 #

在页面组件或_app.tsx中监听路由变化，检测到streamerId为"null"时立即跳转至404页面：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function StreamPage() {
  const router = useRouter();

  useEffect(() => {
    const { streamerId } = router.query;
    if (streamerId === "null") {
      router.push("/404");
    }
  }, [router.query]);

  // 页面业务逻辑
}

4. 完善路由参数校验逻辑 #

确保getServerSideProps中参数获取逻辑正确，避免参数被意外转换为字符串"null"：

export async function getServerSideProps(context) {
  // Next.js 13+ App Router 使用context.params
  // Next.js 12及以下使用context.query
  const { provider, streamerId } = context.params || context.query;

  if (!streamerId || streamerId === "null") {
    return {
      notFound: true,
    };
  }

  // 数据获取逻辑
}

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