Next.js 13动态路由在Google Cloud Run平台无法正常工作

问题重现 #

本地开发时，App Router的服务器组件ListingPage能正常通过params.listingId获取路由参数，但部署到Google Cloud Run后，params对象为undefined，导致API调用失败。组件代码如下：

import getCurrentUser from "@/app/actions/getCurrentUser";
import { getListingById } from "@/app/actions/listingsActions";
import ClientOnly from "@/app/components/ClientOnly";
import EmptyState from "@/app/components/EmptyState";
import ListingClient from "./ListingClient";
import getReservations from "@/app/actions/getReservations";

interface IParams {
  listingId?: string;
}

const ListingPage = async ({ params }: { params: IParams }) => {
  const listing = await getListingById(params.listingId as string);
  const reservations = await getReservations(params);
  const user = await getCurrentUser();

  if (!listing) {
    return (
      <ClientOnly>
        <EmptyState />
      </ClientOnly>
    );
  }

  return (
    <ClientOnly>
      <ListingClient
        listing={listing}
        reservations={reservations}
        currentUser={user}
      />
    </ClientOnly>
  );
};

export default ListingPage;

排查与解决步骤 #

1. 严格校验路由文件结构 #

确认你的路由目录结构完全符合Next.js App Router规范：

• 动态路由必须放在方括号包裹的文件夹内，即app/listings/[listingId]/page.tsx
• 组件文件必须命名为page.tsx（不能是index.tsx或其他名称）
• 确保文件夹命名的[listingId]与代码中参数名listingId大小写完全匹配

2. 检查Cloud Run构建与启动配置 #

• 构建阶段必须执行npm run build（或pnpm build/yarn build），确保生成完整的生产构建产物
• 如果使用Next.js的standalone输出模式（next.config.js中配置output: 'standalone'），Cloud Run的启动命令应为node server.js，而非直接启动Next.js
• 确认部署的镜像包含完整的.next构建文件夹，没有遗漏关键文件

3. 增加参数校验与日志排查 #

在组件中添加空值校验和日志，便于定位问题：

const ListingPage = async ({ params }: { params?: IParams }) => {
  // 先校验params是否存在
  if (!params?.listingId) {
    console.error('Missing listingId param:', params);
    return (
      <ClientOnly>
        <EmptyState />
      </ClientOnly>
    );
  }

  const listing = await getListingById(params.listingId);
  // ... 剩余代码
};

部署后查看Cloud Run的日志，确认请求到达时params的实际值，判断是路由匹配失败还是参数传递异常。

4. 排查URL路由转发问题 #

• 如果使用了Cloud Load Balancer或自定义域名，检查是否存在URL重写规则导致路由参数被截断
• 确保Cloud Run服务的入口路径配置正确，没有修改原始请求的URL结构

5. 客户端组件获取参数的正确方式 #

如果需要在客户端组件中获取路由参数，不要使用next/router的useRouter，改用App Router提供的useParams()钩子：

'use client';
import { useParams } from 'next/navigation';

const ListingClient = () => {
  const params = useParams();
  const listingId = params.listingId as string;
  // ... 客户端逻辑
};

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