Next.js 15 App Router动态博客详情页构建报错求助（SSR兼容）

错误原因分析 #

构建报错的核心是**BlogPageProps中params的类型定义错误**——原本应该是同步对象类型的{ id: string }被错误声明为Promise<any>类型，导致TypeScript构建时严格校验失败。开发环境因类型检查宽松通过，但构建阶段触发错误。

修复步骤 #

1. 修正Page组件的Props类型定义 #

确保BlogPageProps严格匹配Next.js App Router动态路由的Page组件参数类型：

// src/app/Blogs/[id]/page.tsx
import type { PageProps } from 'next';

// 方式1：显式定义动态路由Props类型
type BlogPageProps = {
  params: { id: string };
  searchParams?: { [key: string]: string | string[] | undefined };
};

// 方式2：直接使用Next.js内置PageProps（更推荐）
export default function Page({ params }: PageProps) {
  // 类型断言确保id的类型安全
  const { id } = params as { id: string };
  // 页面逻辑
}

2. 移除params的Promise类型声明 #

检查代码中是否错误地将params包裹为Promise，比如以下错误写法必须修正：

// ❌ 错误写法
type BlogPageProps = {
  params: Promise<{ id: string }>;
};

Next.js会直接传递解析后的同步params对象，无需包装为Promise。

3. 实现SSR优化SEO #

Next.js App Router默认所有组件为Server Component（服务端渲染），天生具备SEO友好性。维持该特性需注意：

• 不要在Page组件顶部添加'use client'指令（除非需要客户端交互逻辑）
• 在Server Component中直接获取博客数据（从数据库/API），确保服务端预渲染
• 配合generateMetadata函数生成页面元信息，强化SEO：

import type { Metadata, ResolvingMetadata } from 'next';

// 服务端生成页面元信息
export async function generateMetadata(
  { params }: { params: { id: string } },
  parent: ResolvingMetadata
): Promise<Metadata> {
  // 服务端异步获取博客数据
  const blog = await fetchBlogById(params.id);
  
  // 合并父级元信息并返回当前页面元数据
  const previousImages = (await parent).openGraph?.images || [];
  return {
    title: blog.title,
    description: blog.excerpt,
    openGraph: {
      images: [`/blogs/${blog.id}/cover.jpg`, ...previousImages],
    },
  };
}

export default async function Page({ params }: PageProps) {
  const { id } = params as { id: string };
  // 服务端异步获取数据（Server Component允许该操作）
  const blog = await fetchBlogById(id);
  
  return (
    <div className="blog-detail">
      <h1>{blog.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: blog.content }} />
    </div>
  );
}

4. 统一类型检查配置 #

确保tsconfig.json开启严格类型检查，消除开发与构建环境的校验差异：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

验证修复 #

1. 执行npm run build或yarn build确认类型错误消失
2. 启动生产环境服务npm start，验证页面正常渲染
3. 使用浏览器Lighthouse工具确认页面的服务端渲染特性

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