PrismicRichText组件无内容显示问题排查

原组件代码 #

<template>
  <div v-for="blog in blogs">
    <h1 class="text-lg font-medium">{{ blog.title[0].text }}</h1>
    <div v-if="blog">
      <PrismicRichText :field="blog.body" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { usePrismic } from "@prismicio/vue";
import { PrismicRichText } from "@prismicio/vue";

const { client, predicate } = usePrismic();

const blogs = ref({});
async function getContent() {
  const res = await client.getByType("post");
  blogs.value = res.results.map((blog: any) => blog.data);
}

onMounted(getContent);
</script>

<style scoped></style>

问题原因 #

你用PrismicRichText组件渲染blog.body，但body大概率是Prismic中的**Slice Zone（切片区域）**类型字段，而PrismicRichText仅支持渲染单一的Rich Text类型字段，无法解析Slice Zone结构的数组数据。

修复步骤 #

1. 替换组件：导入并使用PrismicSliceZone组件来渲染Slice Zone字段，这是Prismic专门用来处理切片区域的组件。
2. 初始化数组：将blogs的初始值从ref({})改为ref([])，因为v-for需要遍历数组类型，避免初始渲染时的类型错误。
3. 配置切片组件：使用createDefaultSliceComponents生成内置切片的默认渲染组件，如果你有自定义切片，需要额外配置对应组件。

修改后的代码 #

<template>
  <div v-for="blog in blogs" :key="blog.id">
    <h1 class="text-lg font-medium">{{ blog.title[0].text }}</h1>
    <div v-if="blog.body">
      <PrismicSliceZone :slices="blog.body" :components="components" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { usePrismic, createDefaultSliceComponents } from "@prismicio/vue";
import { PrismicRichText, PrismicSliceZone } from "@prismicio/vue";

const { client } = usePrismic();
// 生成默认切片的渲染组件
const components = createDefaultSliceComponents();

const blogs = ref([]); // 改为数组初始值
async function getContent() {
  const res = await client.getByType("post");
  blogs.value = res.results.map((blog: any) => ({
    ...blog.data,
    id: blog.id // 为v-for添加唯一key
  }));
}

onMounted(getContent);
</script>

<style scoped></style>

额外说明 #

• 如果你的body确实是Rich Text类型字段，那检查字段路径是否正确：有些情况下Prismic的Rich Text字段可能是blog.body.text或者其他嵌套结构，但根据你说打印是对象数组，大概率是Slice Zone。
• 为v-for添加:key属性，符合Vue的性能优化要求，避免渲染警告。

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