NextJS 13中如何从根布局访问子页面数据？

首先明确：你在根布局里通过children.props拿不到页面数据，是因为App Router中children是渲染后的React元素，不是页面组件的props集合，所以直接访问会返回undefined。下面给两种无需重复获取数据的实现方式：

方式一：利用React Context传递页面数据（适合布局UI中需要展示页面数据的场景） #

这种方式让页面仅获取一次数据，再通过Context传递给根布局：

1. 创建页面数据Context

// app/PageDataContext.js
'use client';
import { createContext, useContext, useState, useEffect } from 'react';

const PageDataContext = createContext();

export function PageDataProvider({ children }) {
  const [pageData, setPageData] = useState(null);

  return (
    <PageDataContext.Provider value={{ pageData, setPageData }}>
      {children}
    </PageDataContext.Provider>
  );
}

export function usePageData() {
  return useContext(PageDataContext);
}

2. 修改根布局，包裹Context并读取数据

// app/layout.js
import { PageDataProvider, usePageData } from './PageDataContext';

export default function RootLayout({ children }) {
  const { pageData } = usePageData();

  return (
    <html lang="zh-CN">
      <head>
        <title>{pageData?.title || '我的博客'}</title>
        <meta name="description" content={pageData?.description || '默认描述'} />
      </head>
      <body>
        <header className="site-header">
          {pageData?.title && <h2 className="page-title">{pageData.title}</h2>}
        </header>
        <PageDataProvider>
          {children}
        </PageDataProvider>
      </body>
    </html>
  );
}

3. 在页面中获取数据并通过客户端组件设置Context
   因为页面默认是服务器组件，不能直接使用客户端钩子，所以需要写一个客户端组件来更新Context：

// app/blog/[slug]/PageDataSetter.js
'use client';
import { usePageData } from '../../PageDataContext';
import { useEffect } from 'react';

export default function PageDataSetter({ data }) {
  const { setPageData } = usePageData();

  useEffect(() => {
    setPageData(data);
  }, [data, setPageData]);

  return null;
}

然后在页面组件中引入这个Setter：

// app/blog/[slug]/page.js
import PageDataSetter from './PageDataSetter';

// 仅调用一次的数据获取函数
async function getPost(slug) {
  const res = await fetch(`https://your-api.com/posts/${slug}`, { cache: 'force-cache' });
  return res.json();
}

export default async function BlogPostPage({ params }) {
  const post = await getPost(params.slug);

  return (
    <>
      <PageDataSetter data={{ title: post.title, description: post.description }} />
      <article>
        <h1>{post.title}</h1>
        <div className="post-content">{post.content}</div>
      </article>
    </>
  );
}

方式二：利用Next.js的fetch缓存（适合仅需在head中注入metadata的场景） #

如果你的需求只是设置页面的title、description这类元数据，Next.js的generateMetadata会自动处理，且不会重复请求数据——因为Next.js默认会缓存fetch请求，即使你在generateMetadata和页面组件中都调用同一个数据获取函数，实际只会发起一次请求：

// app/blog/[slug]/page.js
async function getPost(slug) {
  const res = await fetch(`https://your-api.com/posts/${slug}`);
  return res.json();
}

// 生成页面元数据
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
  };
}

export default async function BlogPostPage({ params }) {
  // 这里的getPost调用会复用之前的缓存结果，不会重复请求
  const post = await getPost(params.slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <div className="post-content">{post.content}</div>
    </article>
  );
}

这种方式无需额外的Context或状态管理，是Next.js官方推荐的元数据处理方案。

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