Next.js调用Sanity数据报错：expected ']' following expression求助

问题描述 #

我在Next.js项目中尝试从Sanity获取数据时，持续遇到错误：Error: expected ']' following expression。作为新手，我无法定位错误来源。我已尝试检查并修正拼写错误，也查阅了相关资料，但仍无法解决问题。

相关代码 #

模式文件 #

product.ts

import {defineField, defineType} from 'sanity'

export default defineType({
  name: 'product',
  title: 'product',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
    }),
    defineField({
      name: 'price',
      title: 'Price',
      type: 'number',
    }),
    defineField({
      name: 'oldprice',
      title: 'Old Price',
      type: 'number',
    }),
    defineField({
      name: 'mainImage',
      title: 'Main image',
      type: 'image',
      options: {
        hotspot: true,
      },
      fields: [
        {
          name: 'alt',
          type: 'string',
          title: 'Alternative Text',
        }
      ]
    }),
    defineField({
      name: 'categories',
      title: 'Categories',
      type: 'array',
      of: [{type: 'reference', to: {type: 'category'}}],
    }),
    defineField({
      name: 'stock',
      title: 'Out Of Stock',
      type: 'boolean',
    }),
    defineField({
      name: 'display',
      title: 'Display',
      type: 'boolean',
    }),
    defineField({
      name: 'created',
      title: 'Created when',
      type: 'datetime',
    }),
    defineField({
      name: 'body',
      title: 'Body',
      type: 'blockContent',
    }),
  ],

  preview: {
    select: {
      title: 'title',
      author: 'author.name',
      media: 'mainImage',
    },
    prepare(selection) {
      const {author} = selection
      return {...selection, subtitle: author && `by ${author}`}
    },
  },
})

category.ts

import {defineField, defineType} from 'sanity'

export default defineType({
  name: 'category',
  title: 'Category',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
    }),
    defineField({
      name: 'mainImage',
      title: 'Main image',
      type: 'image',
      options: {
        hotspot: true,
      },
      fields: [
        {
          name: 'alt',
          type: 'string',
          title: 'Alternative Text',
        }
      ]
    }),
    defineField({
      name: 'description',
      title: 'Description',
      type: 'text',
    }),
  ],
})

数据获取代码 #

import { createClient, groq } from 'next-sanity'

import { apiVersion, dataset, projectId, useCdn } from '../env'


export async function getProducts(){
  
  const client = createClient({
    apiVersion,
    dataset,
    projectId,
    useCdn,
  })


  return client.fetch(

      groq`*[_type = "product"]{
          _id,
          name,
          "slug":slug.current,
          "mainImage": image.asset->url,
          price,
          oldprice,
          category->{
            name,
            "id": _id,
            "mainImage": image.asset->url
          },
          stock,
          display,
          created,
          body,
      }`
  )


}
export async function getCategory(){
  
  const client = createClient({
    apiVersion,
    dataset,
    projectId,
    useCdn,
  })


  return client.fetch(

    groq`*[_type = "category"]{
      _id,
      name,
      "slug":slug.current,
      "mainImage": image.asset->url,
      description,
    }`,
  )


}

页面组件 #

产品页面

export default async function Product () {

    const cats = await getCategory()
  return (
    <>
    <div className='ml-6 pl-6'>
          <p className='font-normal leading-9 text-4xl font-sans ml-6 pl-6 pt-2 pb-6 mb-6'>Product</p>
      </div>
      <main className='mx-6 px-6 py-6 my-6'>
              <div className="grid grid-cols-4 place-content-center ml-6 pl-6">
                    {cats.map((item: { _id: React.Key | null | undefined; mainImage: string | StaticImport; name: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | React.PromiseLikeOfReactNode | null | undefined }) => (
                        <div className="w-10/12 bg-white" key={item._id}>
                            <a href="#">
                                <Image width={300} height={300} id='image' className="w-screen md:h-fit" src={item.mainImage} alt="product image" />
                            </a>
                            <div className="px-5 pb-5 py-3 text-center">
                                <Link href="#">
                                    <h5 className="text-base font-sans leading-6 font-bold text-black">{item.name}</h5>
                                </Link>
                                <div className="mb-5">
                                    <span className="text-xs font-semibold text-[#3a3a3a] leading-6 text-center">5 PRODUCTS</span>
                                </div>
                            </div>
                        </div>

                    ))}

product/[category]/page.tsx

export default async function Product () {

    const products: IItem[] = await getProducts()

    return (
        <>
        <div className='ml-6 pl-6'>
        <p className='font-normal leading-9 text-4xl font-sans ml-6 pl-6 pt-2 pb-6 mb-6'>Categories</p>
        </div>
        <main className="">
            <div className="grid grid-cols-4 place-content-center ml-6 pl-6">
                {products.map(item => (
                    <div className="w-10/12 bg-white" key={item.id}>
                        <a href="#">
                            <Image width={300} height={300} id='image' className="w-screen md:h-fit" src={item.mainImage} alt="product image" />
                        </a>
                        <div className="px-5 pb-5 py-3">
                            <Link href="#">
                                <p className="text-sm font-sans leading-6 font-normal text-[#3a3a3a]">{item.category}</p>
                            </Link>
                            <Link href="#">
                                <h5 className="text-base font-sans leading-6 font-bold text-black">{item.name}</h5>
                            </Link>
                            <div className="flex items-center mt-2.5 mb-5">
                                <span className="text-sm font-bold text-[#3a3a3a] leading-6">₦{item.price}</span>
                            </div>
                            <div className="flex items-center justify-between">
                                <a href="#" className="text-white bg-[#B1250A] hover:bg-black focus:ring-4 focus:outline-none focus:ring-black font-bold rounded-lg text-base px-5 py-2.5 text-center dark:bg-[#B1250A] dark:hover:bg-black dark:focus:ring-[#B1250A]">Add to cart</a>
                            </div>
                        </div>
                    </div>

                ))}

接口定义 #

// Define a type for your item
export interface IItem {
  _id: number;
  name: string;
  slug: string;
  price: number;
  oldprice: number;
  mainImage: string;
  category: string[];
  stock: boolean;
  display: boolean;
  created: number;
  body: string;
};

export interface ICategory {
  _id: string;
  name: string;
  mainImage: string;
  slug: string;
  description: string;
}
  

问题解决 #

我并未明确找到错误原因，不过通过拆分并重构代码后，问题得以解决。

内容的提问来源于stack exchange，提问作者Damilola Peter Meshe