React渲染Sanity.io blockContent显示[object Object]问题求助

你遇到的问题核心是没有正确获取和传递完整的blockContent数据，同时错误地将对象直接作为HTML内容传入，导致页面显示[object Object]。具体问题出在这几个地方：

• Sanity查询只截取了description的部分内容（第一个block的第一个子节点），没有拿到完整的block数组
• 使用dangerouslySetInnerHTML时直接传入了对象类型的aboutMe.description，而非字符串
• 传给BlockContent组件的blocks参数不是完整的block集合

1. 修正Sanity查询，获取完整的blockContent #

修改查询语句，直接获取整个description数组，不要只截取部分内容：

const aboutMeQuery = `*[_type == "aboutme"][0]{
  profileImg,
  description, // 直接获取完整的blockContent数组
  "resumeUrl": resume.asset -> url
}`;

// 针对slug的查询同样修改：
client.fetch(
  `*[slug.current == "${slug}"]{
    description // 获取完整数组
  }`
).then((data) => setAboutMeData(data[0]?.description)); // 提取description字段

2. 正确使用BlockContent组件 #

BlockContent组件需要接收完整的blocks数组作为参数，同时替换成你自己的Sanity项目ID：

// 修改return中的BlockContent部分：
<BlockContent
  blocks={aboutMe.description} // 使用aboutMe中的完整description数组
  projectId="你的Sanity项目ID" 
  dataset="production"
  // 处理block中的image类型（匹配你的schema配置）
  serializers={{
    types: {
      image: ({node}) => <img src={urlFor(node).url()} alt="Block content image" className="block-image" />
    }
  }}
/>

3. 移除错误的dangerouslySetInnerHTML用法 #

你之前的<p>标签直接传入对象类型的aboutMe.description，导致显示[object Object]。直接用BlockContent渲染完整内容，删除这段错误代码：

// 删掉这段代码：
<p
  className="p-text"
  id="p-text-id"
  dangerouslySetInnerHTML={{ __html: aboutMe.description }}
></p>

修改后的关键代码片段 #

useEffect查询部分 #

useEffect(() => {
  const aboutsQuery = '*[_type == "abouts"]';
  const aboutMeQuery = `*[_type == "aboutme"][0]{
    profileImg,
    description,
   "resumeUrl": resume.asset -> url
  }`;
  client.fetch(aboutsQuery).then((data) => setAbouts(data));
  client.fetch(aboutMeQuery).then((data) => {
    setAboutMe(data);
  });
  client.fetch(
    `*[slug.current == "${slug}"]{
      description
    }`
  ).then((data) => setAboutMeData(data[0]?.description));

}, []);

渲染部分 #

<div className="app__about-data app__flex">
  <h2 className="head-text">About Me</h2>
  <BlockContent
    blocks={aboutMe.description}
    projectId="你的Sanity项目ID"
    dataset="production"
    serializers={{
      types: {
        image: ({node}) => <img src={urlFor(node).url()} alt="Block content image" className="block-image" />
      }
    }}
  />
  <div>
    <button className="portfolio-button" onClick={viewResumeHandler}>
      Resume
    </button>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Sanjay G.