Vue项目中Sanity Portable Text渲染失败问题求助

你的代码存在两个核心问题导致SanityBlocks组件无法渲染内容：

1. 数据结构处理错误 #

Sanity查询*[_type == "impressum"]返回的是数组类型（即使只有一个文档匹配），但你直接通过content.impressumContent访问属性——数组本身没有impressumContent这个键，需要取数组的第一个元素再访问对应字段。

2. 组件Props名称错误 #

sanity-blocks-vue-component接收Portable Text数据的props是blocks，而非你写的block，组件因此无法接收到需要渲染的数据。

修正后的代码 #

模板部分 #

<template>
    <div :class="name" v-if="!loading && content.length">
        <SanityBlocks :blocks="content[0].impressumContent" />
    </div>
    <div v-else>加载中...</div>
</template>

脚本部分 #

<script>
import { SanityBlocks } from 'sanity-blocks-vue-component';
import sanity from "../../sanity.js";

const query = `*[_type == "impressum"]{
    impressumContent,
}
`
export default {
    components: { 
        SanityBlocks 
    },
    data() {
        return {
            name: 'p-impressum',
            loading: true,
            content: [],
            error: null
        }
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            this.error = null;
            this.loading = true;
            sanity.fetch(query).then(
                (content) => {
                    this.loading = false;
                    this.content = content;
                },
                (error) => {
                    this.loading = false;
                    this.error = error;
                }
            );
        }
    }
}
</script>

额外优化建议 #

• 可以直接在查询中获取单个文档，简化后续数据访问：

  *[_type == "impressum"][0]{
      impressumContent,
  }
  

  此时模板中可直接使用content.impressumContent，无需再处理数组索引。
• 保留加载和错误状态的判断，避免空数据或请求失败时出现页面异常。

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