Next.js+TypeScript：getInitialProps数据传入Layout组件显示undefined求助

核心问题出在两个组件的参数解构写法错误：

1. _app.tsx 中 MyApp 组件错误地将 categories 作为第二个独立参数解构，而实际上 getInitialProps 返回的属性会合并到组件的主props对象中。
2. Layout 组件错误地将props拆分为两个独立参数，React组件仅接收单个props对象。

修复后的 _app.tsx #

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '../components/Layout'
import 'flowbite'
import { categoryProps, Category } from '../interfaces'

// 扩展AppProps类型，添加categories属性
type MyAppProps = AppProps & categoryProps

const MyApp = ({ Component, pageProps, categories }: MyAppProps) => {
  return (
    <Layout categories={categories}>
      <Component {...pageProps} />
    </Layout>
  )
}

MyApp.getInitialProps = async () => {
  const res = await fetch(`${process.env.API_URL}/categories`);
  const categories: Category[] = await res.json();
  return { categories }
}

export default MyApp

修复后的 layout.tsx #

import React from 'react'
import Footer from './Footer'
import Header from './Header'
import HeaderSearch from './HeaderSearch'
import Nav from './Nav'
import { categoryProps } from '../interfaces'

// 从单个props对象中解构所需属性
function Layout({ children, categories }: { children: React.ReactNode } & categoryProps) {
  console.log(categories); // 现在可正常输出数据
  return (
    <>
      <Header />
      <HeaderSearch categories={categories} />
      <Nav />
      {children}
      <Footer />
    </>
  )
}

export default Layout

修复说明 #

1. 在 _app.tsx 中，通过扩展 AppProps 类型明确包含 categories，并从主props对象中解构该属性，符合Next.js对getInitialProps返回值的处理逻辑。
2. Layout 组件改为从单个props对象中同时解构 children 和 categories，遵循React组件的参数规范，确保能正确接收父组件传递的属性。

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