Next.js-TS中如何获取pages/[file_id].tsx路由中的file_id参数

首先得指出你代码里的核心问题：你把页面组件写成了API路由的格式！ pages目录下的页面组件（比如[file_id].tsx）根本不需要接收req和res参数——这是pages/api下的API路由才会用的写法，所以你console.log(req)才会输出undefined。

接下来给你三种常用的解决方案，你可以根据自己的页面渲染方式选择：

方案1：用useRouter钩子（客户端/SSR页面通用） #

如果你的页面是客户端渲染，或者用服务端渲染但不需要在服务端提前处理参数，直接用Next.js内置的useRouter钩子就能拿到动态路由参数：

import Head from 'next/head';
import { useRouter } from 'next/router';

export default function ImagePage() {
  const router = useRouter();
  // 从router.query中获取file_id，注意初始加载时可能为undefined，建议加空值判断
  const fileId = router.query.file_id;

  return (
    <div>
      <Head>
        <title>{fileId ? `图片详情：${fileId}` : '加载中...'}</title>
      </Head>
      <p>当前文件ID：{fileId || '正在加载参数'}</p>
    </div>
  )
}

注意点： #

• 页面初始加载阶段（比如静态生成页面的首次渲染），router.query可能还未填充完成，所以一定要做空值处理，避免出现undefined报错。

方案2：用getServerSideProps（服务端渲染场景） #

如果需要在服务端就拿到file_id并做一些逻辑处理（比如根据ID从数据库取数据），可以用getServerSideProps，它能直接从上下文对象中获取参数：

import Head from 'next/head';
import { GetServerSideProps } from 'next';

// 定义页面组件接收的props类型
interface ImagePageProps {
  fileId: string;
}

export default function ImagePage({ fileId }: ImagePageProps) {
  return (
    <div>
      <Head>
        <title>图片详情：{fileId}</title>
      </Head>
      <p>当前文件ID：{fileId}</p>
    </div>
  )
}

// 服务端获取参数并传递给页面组件
export const getServerSideProps: GetServerSideProps<ImagePageProps> = async (context) => {
  // 从context.params中取出动态路由参数，key和你文件名里的[file_id]对应
  const fileId = context.params?.file_id as string;

  // 这里可以写服务端专属逻辑，比如调用API、查询数据库
  // const imageData = await fetch(`https://your-api.com/images/${fileId}`).then(res => res.json());

  return {
    props: {
      fileId, // 把参数传给页面组件
      // imageData, 如果有其他数据也可以一起传
    },
  };
};

这种方式的优势是参数在服务端就能获取到，不需要等客户端渲染，适合需要服务端数据预取的场景。

方案3：用getStaticProps+getStaticPaths（静态生成场景） #

如果你的页面是静态生成的，并且提前知道所有可能的file_id，可以用这两个函数配合：

import Head from 'next/head';
import { GetStaticProps, GetStaticPaths } from 'next';

interface ImagePageProps {
  fileId: string;
}

export default function ImagePage({ fileId }: ImagePageProps) {
  return (
    <div>
      <Head>
        <title>图片详情：{fileId}</title>
      </Head>
      <p>当前文件ID：{fileId}</p>
    </div>
  )
}

// 定义所有需要预生成静态页面的路径
export const getStaticPaths: GetStaticPaths = async () => {
  // 这里可以从数据库或API拉取所有存在的file_id
  const paths = [
    { params: { file_id: 'img-123' } },
    { params: { file_id: 'img-456' } },
  ];

  return {
    paths,
    fallback: false, // 设为true时，会为未预定义的路径动态生成静态页面
  };
};

// 为每个静态路径获取对应的props
export const getStaticProps: GetStaticProps<ImagePageProps> = async (context) => {
  const fileId = context.params?.file_id as string;

  return {
    props: {
      fileId,
    },
  };
};

总结 #

你之前的核心错误是混淆了页面组件和API路由的写法，页面组件不需要req和res参数。只要去掉这两个参数，选择上面适合你场景的方案，就能轻松获取URL中的file_id了。

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