NextJS 错误：无法读取 null 的属性（理智）

Question

我正在生成一个商店项目，但在使用 slug 生成 [产品] 页面时遇到以下问题，它显示了一个

Error: Cannot read properties of null (reading 'name')

应用\产品[产品Id]\page.tsx

import { getProduct } from "@/sanity/sanity-utils";

type Props = {
    params: { product: string }
  }
  
  export default async function Product({ params }: Props) {
    const slug = params.product;
    const product = await getProduct(slug);
    return <div>{product.name}</div>

  }

sanity\sanity-utils.ts

export async function getProduct(slug: string): Promise<Product> {
    return createClient(clientConfig).fetch(
        groq`*[_type == "project" && slug.current == "${slug}"][0]{
            _id,
            createdAt,
            name,
            "slug": slug.current,
            brand,
            "image": image[].asset->url,
            pack,
            sku,
            sizes,
            description,
            "category": category->name,
            "subcategory": subcategory->name
          }`,
          `{slug}`
          
        )
      }

在 sanity-utils 页面上，如果我从

{slug}

中删除 ``，它会向我显示错误

Error: Unable to parse value of "$slug=undefined". Please quote string values.

但它没有解决任何问题，它只是给了我上述错误。

请帮忙，非常感谢大家！

Answer 1

将props类型中的product参数替换为productId，使其与您定义的路线一致。