Next.js动态路由容器调用getServerSideProps返回undefined如何解决

• Next.js Pages 路由的规则是，只有路由匹配的页面入口文件中导出的getServerSideProps才会被框架自动执行。你的路由入口是/Pages/history/[hid]/index.tsx，但getServerSideProps写在了非入口的HistoryDetailContainer.tsx中，这个函数不会被调用，自然没有props传入组件。
• 若你已经将getServerSideProps导出到了入口文件，也可能是index.tsx中没有将拿到的SSR props透传给HistoryDetailContainer组件，导致组件接收不到参数。

两种方案任选其一即可：

方案1：将getServerSideProps放到入口文件（推荐） #

将HistoryDetailContainer.tsx中的getServerSideProps代码迁移到/[hid]/index.tsx中导出，同时在入口组件内透传所有props给容器组件，示例代码如下：

// /Pages/history/[hid]/index.tsx
import type { NextPage, GetServerSideProps } from 'next'
import HistoryDetailContainer from './HistoryDetailContainer'

const HistoryDetailPage: NextPage = (props) => {
  // 透传Next.js传入的所有SSR props给容器组件
  return <HistoryDetailContainer {...props} />
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  try {
    const ssrData = 'SSR TEST'
    return {
      props: { ssrData }
    }
  } catch (e) {
    console.dir(e)
    return {
      redirect: {
        destination: '/',
        permanent: false
      }
    }
  }
}

export default HistoryDetailPage

方案2：在入口文件重新导出getServerSideProps #

如果不想拆分容器组件的逻辑，直接在index.tsx中重新导出容器组件内的getServerSideProps即可，同时记得透传props：

// /Pages/history/[hid]/index.tsx
import HistoryDetailContainer from './HistoryDetailContainer'
// 重新导出容器内的getServerSideProps
export { getServerSideProps } from './HistoryDetailContainer'

export default HistoryDetailContainer

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