Next.js响应式导航栏报错：Cannot read properties of undefined (reading 'metadata')

云上老周

2026-7-10

错误原因分析

你遇到的TypeError: Cannot read properties of undefined (reading 'metadata')，核心问题出在**children.props的访问逻辑**上，和TypeScript转JavaScript无关，NavItem的props定义是正常的：

children并非你预期的带props的组件元素：
在React（包括Next.js）中，children是传递给布局组件的子节点内容，它可能是单个React元素、多个元素组成的数组，甚至是字符串/数字。你直接访问children.props.metadata，只有当children是单个且明确传递了metadata、pageId props的组件元素时才有效，而实际场景中这种情况很难保证（比如页面内容包含多个元素时，children是数组，children.props会直接返回undefined）。
Next.js布局的元数据传递逻辑错误：
不管是Pages Router还是App Router，都不推荐从children.props提取元数据：
- Pages Router：页面组件的props不会自动透传到布局的children中；
- App Router：布局组件的children是无props的React节点，根本不存在children.props属性。

修复方案

方案一：直接给Layout传递元数据（推荐，灵活可靠）

修改Layout组件，让它直接接收metadata和pageId作为独立props，而非从children中提取：

import Head from "next/head";

// 保留NavItem、Navbar、FooterLink、Footer的原有代码不变

export default function Layout({ children, metadata, pageId }) {
  return (
    <>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <title>{metadata.title}</title>
        <meta
          name="description"
          content={metadata.description}
        />
        {/* Open Graph tags */}
        <meta property="og:title" content={metadata.title} />
        <meta
          property="og:description"
          content={metadata.description}
        />
        <meta
          property="og:image"
          content={metadata.openGraph.image}
        />
        <meta
          property="og:url"
          content={metadata.openGraph.url}
        />
      </Head>
      <Navbar pageId={pageId} />
      <main>{children}</main>
      <Footer />
    </>
  );
}

然后在页面组件中使用Layout时，主动传入所需参数：

// 示例：pages/index.js
import Layout from '../components/Layout';

const pageMetadata = {
  title: "About Me",
  description: "个人介绍页面",
  openGraph: {
    image: "/og-about.jpg",
    url: "https://your-domain.com/"
  }
};

export default function AboutPage() {
  return (
    <Layout metadata={pageMetadata} pageId="about_me">
      <h1>关于我</h1>
      {/* 其他页面内容 */}
    </Layout>
  );
}

方案二：适配Next.js App Router（如果使用App Router）

如果你用的是Next.js 13+的App Router，应该使用框架原生的generateMetadata函数处理元数据，无需手动操作Head：

// app/layout.js
export async function generateMetadata() {
  return {
    title: "站点标题",
    description: "站点描述",
    openGraph: {
      image: "/og-site.jpg",
      url: "https://your-domain.com/"
    }
  };
}

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Navbar pageId="about_me" />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

单个页面的元数据可以在对应page.js中单独定义generateMetadata函数覆盖全局配置。

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

Next.js响应式导航栏报错：Cannot read properties of undefined (reading 'metadata')

方案一：直接给Layout传递元数据（推荐，灵活可靠） #

方案二：适配Next.js App Router（如果使用App Router） #

方案一：直接给Layout传递元数据（推荐，灵活可靠）

方案二：适配Next.js App Router（如果使用App Router）