Next.js 14部署后generateMetadata中异步请求导致页面无限加载问题求助

阿华AIGC实验室

2026-4-1

大家好，我最近在做Next.js 14项目时遇到了一个头疼的问题：本地开发时用内置的generateMetadata生成动态元数据完全正常——能正确获取文章标题、读取关联内容，<head>标签里的元数据也能正常渲染。但把代码部署到开发环境后，页面直接陷入无限加载状态，根本没法正常访问。

先给大家看下我的项目文件夹结构：

/article
  /[title]
    page.tsx
    articleContent.tsx
  layout.tsx
  page.tsx

相关代码片段

首先是/article/layout.tsx的内容：

import { Metadata } from "next";
import { ToastProvider } from "@/components/ui/ToastProvider";

export const metadata: Metadata = {
  title: "...",
  description: "...",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <head>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
      </head>
      <body>
        <ToastProvider />
        {children}
      </body>
    </html>
  );
}

然后是出问题的/article/[title]/page.tsx（已经简化过，保留了核心逻辑）：

import { Metadata, ResolvingMetadata } from "next";
import NewspaperService from "@/services/newspaper";

type Props = {
  params: Promise<{ title: string }>;
};

export async function generateMetadata({ params }: Props, parent: ResolvingMetadata): Promise<Metadata> {
  const { title } = await params;
  // 就是这行代码导致部署后无限加载
  const article = await NewspaperService.assetNewspaperArticleRead(1);
  return {
    title: "Article",
    description: "Article Hacker ouvert.",
  };
}

export default async function Page({ params }: Props) {
  const { title } = await params;
  // 这里简化为返回空，实际项目里有内容
  return <></>;
}

我已经做的排查

一开始怀疑父布局layout.tsx的影响，毕竟里面自定义了<html>和<head>标签，但参考官方文档说父布局不会干扰generateMetadata的工作，我甚至尝试移除了父布局，结果问题依然存在。
后来逐步简化代码测试，才定位到无限加载的触发点就是generateMetadata里的await NewspaperService.assetNewspaperArticleRead(1)这行异步请求——哪怕我把Page组件简化到几乎啥都不返回，只要保留这行代码，部署后就会无限加载。
更奇怪的是，官方文档明确说明Next.js 14里的异步调用不会再导致无限加载的问题，但本地完全正常，一部署就出问题，这让我彻底懵了。

有没有大佬遇到过类似的情况？或者能帮我分析下可能的原因？本地和部署环境的差异到底在哪里导致了这个问题？实在是卡在这里好久了，求指点！