嗨我是nextjs新手
我想通过动态属性的头部，为此我使用getInitialProps在nextjs。getInitialProps工作正常，但当我传递到布局组件其显示未定义。下面我已经分享了我所有必要的代码片段。请帮助我应该在需要做什么来解决这个问题
_应用程序. tsx

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

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

MyApp.getInitialProps = async () => {
  const res = await fetch(process.env.API_URL+'/categories');
  const categories = 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'

function Layout({children}:any,{categories}:categoryProps) {
  console.log(categories);  //output undefined
  return (
    <>
        <Header/>
        <HeaderSearch categories={categories} />
        <Nav/>
        {children}
        <Footer/>
    </>

  )
}

export default Layout

interfaces.ts

export interface Category {
    name:string,
    image:string,
    slug:string
}

export interface categoryProps {
    categories:Category[]
  }

组件chrome扩展输出屏幕截图MyApp组件显示类别数组列表。

组件chrome扩展输出屏幕截图显示类别的布局组件未定义