Next.js 14根目录动态路由用notFound()报错，求解决方法

问题原因 #

你遇到的错误提示看似指向root layout，但实际是因为在App Router的服务器组件中，同步数据获取导致notFound()的调用时机不符合框架要求，进而触发了错误关联。

解决方案 #

将页面组件改为异步组件，使用async/await异步获取文章数据，确保notFound()在正确的流程中被调用：

修改后的[slug]/page.tsx代码 #

import { notFound } from 'next/navigation';
import { getArticleBySlug } from '@/lib/api';

interface IParams {
  params: { slug: string };
}

export default async function Article({ params }: IParams) {
  // 异步获取文章（需确保getArticleBySlug返回Promise）
  const article = await getArticleBySlug(params.slug);

  if (!article) {
    notFound();
  }

  return (
    <div>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: article.content }} />
    </div>
  );
}

关键说明 #

1. 异步数据获取：App Router的服务器组件必须通过async/await处理异步数据，同步获取会打乱Next.js的渲染生命周期，导致错误误判。
2. 确保getArticleBySlug是异步函数：如果你的getArticleBySlug目前是同步逻辑，需要将其改造为返回Promise的异步函数（比如封装API请求、数据库查询为异步操作）。
3. 异常处理（可选）：如果getArticleBySlug可能抛出请求错误，可通过try/catch捕获并触发notFound：

export default async function Article({ params }: IParams) {
  let article;
  try {
    article = await getArticleBySlug(params.slug);
  } catch (err) {
    notFound();
  }

  if (!article) notFound();

  return <div>{/* 文章内容 */}</div>;
}

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