Next.js 13：如何在layout.tsx中获取页面metadata导出的标题？

针对你的需求，有两种可靠的实现方式，均适用于Next.js 13.4及以上版本：

方法一：客户端组件使用useMetadata钩子 #

将Layout转为客户端组件，通过官方提供的useMetadata钩子直接获取当前路由的Metadata：

修改后的layout.tsx代码：

'use client';
import { ReactNode } from "react";
import { useMetadata } from 'next/navigation';

export default function Layout({ children }: { children: ReactNode }) {
    const metadata = useMetadata();
    return (
        <>
            <h1>{metadata?.title || '默认标题'}</h1>
            {children}
        </>
    );
}

说明：

• 添加'use client'指令将组件标记为客户端组件，这是使用useMetadata的前提
• useMetadata()会返回当前路由的完整Metadata对象，自动包含子页面page.tsx中导出的title
• 加入|| '默认标题'做降级处理，避免页面未定义title时出现空白

方法二：服务器组件使用resolveMetadata异步函数 #

如果需要保持Layout为服务器组件，可使用异步的resolveMetadata函数解析当前路由的Metadata：

修改后的layout.tsx代码：

import { ReactNode } from "react";
import { resolveMetadata } from 'next/navigation';

export default async function Layout({ children }: { children: ReactNode }) {
    const metadata = await resolveMetadata();
    return (
        <>
            <h1>{metadata?.title || '默认标题'}</h1>
            {children}
        </>
    );
}

说明：

• 将Layout改为异步组件（添加async关键字），因为resolveMetadata是异步函数
• resolveMetadata()会在服务器端解析当前路由的完整Metadata，包括子页面的配置
• 同样加入了默认标题的降级处理

内容的提问来源于stack exchange，提问作者Daniel Z.