getServerSideProps返回的posts在组件中为undefined问题排查

问题根源 #

你的_app.tsx写法不符合Next.js规范，导致getServerSideProps返回的posts无法传递给Home组件。

Next.js的_app.tsx作为全局入口组件，必须接收Component（当前路由匹配的页面组件）和pageProps（页面组件通过getServerSideProps/getStaticProps返回的props）这两个核心参数，并且要把pageProps传递给Component渲染。你现在直接在_app.tsx里导入并硬渲染Home组件，完全没传递任何props，那Home里的posts自然是undefined。

修复后的_app.tsx代码 #

import type { AppProps } from 'next/app'

const TestApp = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />
}

export default TestApp

额外说明 #

如果需要在全局添加固定元素（比如导航栏），可以这样写：

import type { AppProps } from 'next/app'
import Navbar from '../components/Navbar'

const TestApp = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <Navbar />
      <Component {...pageProps} />
    </>
  )
}

export default TestApp

绝对不要在_app.tsx里硬编码渲染某个特定页面组件（比如Home），否则所有路由都会显示这个页面，同时页面的props传递机制会直接失效。

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