将理智内容湖连接到前端时错误

Question

我在从理智到模板中获取博客时会遇到错误，我正在创建next.js网站

错误：错误：未知块类型“未定义”，请指定一个 serializers.types prop

中的序列化器

<PortableText
  // Pass in block content straight from Sanity.io
  content={blogs[0].content}
  projectId="oeqragbg"
  dataset="production"
  // Optionally override marks, decorators, blocks, etc. in a flat
  // structure without doing any gymnastics
  serializers = {{
    h1: (props) => <h1 style={{ color: "red" }} {...props} />,
    li: ({ children }) => <li className="special-list-item">{children}</li>,
  }}
/>

export async function getServerSideProps(context) {
  const client = createClient({
    projectId: 'oeqragbg',
    dataset: 'production',
    useCdn: false
  });
 
  const query = '*[_type == "blog"]';
  const blogs = await client.fetch(query);
  return {
    props: {
      blogs
    }
  }
}

Answer 1

您是否正在使用@portabletext/react 软件包？
这就是您的使用方式：

import {PortableText} from '@portabletext/react'

const myPortableTextComponents = {
  block: {
    h1: ({children}) => <h1 style={{ color: "red" }}">{children}</h1>
  },
  listItem: {
    bullet: ({children}) => <li className="special-list-item">{children}</li>,
  },
}

<PortableText
  value={blogs[0].content}
  components={myPortableTextComponents}
/>