Next.js [id].jsx中getServerSideProps如何获取动态路由id值

前置检查 #

首先确认文件路径匹配：如果访问路径格式为/page/id123，你的动态路由文件必须放在pages/page/[id].jsx路径下，文件位置错误会导致Next.js无法识别路由规则，拿不到对应参数。

现有代码问题 #

你贴的代码存在几个会直接导致报错/功能异常的问题：

• 作用域错误：context是getServerSideProps的入参，仅在该函数内部可用，直接在页面组件内访问context会触发未定义变量报错
• JSX语法错误：Link标签包裹的a元素结束标签误写为</>，标签不匹配会直接编译失败
• 逻辑错误：用while做条件判断会触发死循环，页面渲染应该用if/三元表达式做条件分支
• 传值冗余：不需要把整个context对象透传给组件，只提取需要的路由参数传递即可
• 逻辑反转：原代码判断address存在时返回登录入口，不符合常规业务逻辑，应该是未连接钱包时才显示登录入口

修复后可运行代码 #

import Link from 'next/link';
import React from "react";
// 注意：useAddress、useDisconnect为第三方钱包SDK提供的钩子，请根据你实际使用的SDK补全导入语句
// import { useAddress, useDisconnect } from "对应的SDK包名";

export default function Global({ id }) {
  // 组件内直接通过props拿到服务端传回的动态路由id
  console.log("客户端拿到的路由id参数：", id);
  const address = useAddress();
  const disconnectWallet = useDisconnect();

  // 未连接钱包时显示登录入口
  if (!address) {
    return (
      <Link href="/">
        <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">
          Click Here To Login
        </a>
      </Link>
    );
  }

  // 已连接钱包时的业务内容，可直接使用id参数
  return (
    <div>
      <p>当前访问的页面ID为：{id}</p>
      {/* 其余业务代码自行补充 */}
    </div>
  );
}

export async function getServerSideProps(context) {
  // 从context.params中解构动态路由参数，字段名和动态路由文件名中括号内的名称完全对应
  const { id } = context.params;
  console.log("服务端拿到的路由id参数：", id);
  return {
    props: {
      // 仅把需要的id参数传给页面组件
      id
    }
  };
}

关键注意点 #

• getServerSideProps仅在服务端运行，内部的变量、逻辑不会暴露给客户端，需要给组件用的值必须放到返回值的props字段中
• 动态路由参数的键名严格和文件名绑定：文件命名为[id].jsx就取context.params.id，如果命名为[productId].jsx就对应取context.params.productId
• 该写法仅适用于Next.js Pages Router，如果你后续升级到App Router，路由参数的获取方式会有变化

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