Next.js如何通过POST方法获取数据？getServerSideProps拿不到路由参数怎么办

你代码里一共有以下几处核心错误： #

• 动态路由参数名不匹配：你的动态路由文件名是[catId].js，所以路由参数的key是catId，不是你写的storeId，自然拿不到正确的ID值。
• Hook调用位置错误：useRouter是客户端React Hook，只能在组件内部调用，你写在了Post组件外部，本身就会触发Hook调用规则报错。而且getServerSideProps运行在服务端，根本不能通过useRouter获取参数，必须从传入的context对象里提取参数。
• POST请求参数格式错误：你直接把数值JSON.stringify后传给后端，绝大多数后端接口要求POST Body是JSON对象格式，不是单独的数值，后端无法解析到你传递的ID。
• 拼写与变量访问错误：组件内打印props时写的是props.ruslt，拼写错误，正确是result；组件内直接访问storeId也不存在，需要先把参数从getServerSideProps传到props里。
• 路由文件路径错误：你从menuApi.js跳转到/category/{x.id}，对应的路由文件必须放在pages/category/[catId].js路径下，放错位置也会404或者拿不到参数。

修正后的[catId].js参考代码： #

import { useRouter } from 'next/router'

const Post = (props) => {
  // 组件内要拿参数可以从props取，也可以用useRouter
  const router = useRouter()
  const { catId } = router.query
  console.log(props.result)
  return <p>Post: {catId}</p>
}

export async function getServerSideProps(context) {
  // Pages路由（pages目录）用context.query拿参数，App Router（app目录）用context.params
  const { catId } = context.query
  // 按后端要求传对象格式的参数，字段名可根据实际接口规则调整
  const offerList = await fetch('http://localhost:3000/api/v4/web/list',{
    method:'POST',
    body: JSON.stringify({ catId }),
    headers: { "Content-Type": "application/json" },
  })
  const offerData = await offerList.json();
  const result = offerData.stores;

  return {
    props: {
      result,
      catId // 把catId传给组件，组件内可以直接用props.catId访问
    },
  };
}

export default Post

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