NextJS14+TypeScript+Prisma：类型不兼容错误修复求助

核心问题是两处IParams接口的productId类型定义不一致：页面路由的IParams中productId为可选类型（string | undefined），但getProductById函数要求的IParams中productId是必填string，导致传参时类型不兼容。下面是几种可行的修复方案：

方案1：统一接口类型，在查询函数内部处理undefined #

将数据层的IParams接口与页面保持一致，允许productId为可选，再在函数内部判断参数有效性：

// 数据层文件（如services/products.ts）
interface IParams {
  productId?: string;
}

export async function getProductById(params: IParams) {
  // 先校验参数，不存在则抛出错误或返回null
  if (!params.productId) {
    throw new Error("Product ID cannot be undefined");
    // 或返回null：return null;
  }

  // 调用Prisma查询商品
  const product = await prisma.product.findUnique({
    where: { id: params.productId }
  });

  return product;
}

方案2：在页面中添加类型守卫，确保参数存在后调用函数 #

如果你的路由是动态路由（如app/products/[productId]/page.tsx），理论上productId应该存在，但TypeScript无法自动推断。可以先做参数校验，确保productId为string后再调用查询函数：

// page.tsx
interface IParams {
  productId?: string;
}

export default async function ProductPage({ params }: { params: IParams }) {
  // 参数不存在时返回404页面
  if (!params.productId) {
    return <div>Product not found</div>;
  }

  // 此时productId已被TypeScript推断为string类型，可直接传入
  const product = await getProductById({ productId: params.productId });

  if (!product) {
    return <div>Product not found</div>;
  }

  // 渲染商品详情
  return (
    <div>
      <h1>{product.name}</h1>
      {/* 其他商品信息 */}
    </div>
  );
}

方案3：修改页面接口，将productId设为必填 #

如果能确定动态路由的productId一定会存在（NextJS在匹配动态路由时会确保参数存在），可以直接修改页面的IParams接口，去掉可选标记：

// page.tsx
interface IParams {
  productId: string; // 移除?，设为必填
}

export default async function ProductPage({ params }: { params: IParams }) {
  // 此时params完全符合getProductById的参数要求
  const product = await getProductById(params);

  if (!product) {
    return <div>Product not found</div>;
  }

  // 渲染商品详情
  return (
    <div>
      <h1>{product.name}</h1>
    </div>
  );
}

方案选择建议 #

• 方案1适合需要复用查询函数、兼容参数不存在场景的情况；
• 方案2更严谨，同时处理了参数缺失和商品不存在的错误场景；
• 方案3最简洁，适合确定动态路由参数必存在的业务场景。

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