为什么pageProps在NextJS页面组件没有被传递?

Question

我有index.js页面，我使用getServerSideProps()通过graphql获取Strapi数据。由于某些原因，props对象是空的。我已经正确配置了_app.js，并且我确定返回SSR值。

index.js

const IndexPage = props => {
useEffect(() => {
console.log(props) // logs empty object {}
}, [props])
return (
<>
...
</>
}
export const getServerSideProps = async () => {
return {
props: {
data: ["Hello World!"]
}
}
}

_app.js

function MyApp({ Component, pageProps, router }) {
console.log(pageProps) // this logs { data: ['Hello World] } object
return (
<AppProvider>
<AnimatePresence
initial={false}
onExitComplete={() => window.scrollTo({ top: 0 })}
mode="wait"
>
<Component {...pageProps} key={router.route} />
</AnimatePresence>
</AppProvider>
)
}

那么，是我做错了什么还是它是一个bug?

Answer 1

我找到了答案。我完全忽略了我在页面过渡动画中使用自定义HOC的事实:

export default withTransition(IndexPage)

没有传递父组件的props

export const withTransition = ParentComponent => {
...
return () => (
<>
<ParentComponent />
...
</>
)
}

修复:

export const withTransition = ParentComponent => {
...
return (props) => (
<>
<ParentComponent {...props} />
...
</>
)
}