如何用Sanity展示动态文本与图片？组件无法渲染数据

下面是针对你遇到的问题的具体排查和解决步骤：

• 检查变量名与数据层级一致性
  对照console.log(bannerData)的输出结果，确认组件中使用的变量名和数据层级完全匹配。比如如果控制台输出的是bannerData.smallText，就不能在组件里写成heroBanner.smallText——大概率是变量名或数据嵌套层级搞错了。

• 处理异步加载的空值情况
  Sanity数据是异步获取的，组件首次渲染时数据还未返回，此时bannerData可能是undefined或空对象。可以通过以下方式避免渲染异常：

  // 方式1：先判断数据存在再渲染
  {bannerData && <div>{bannerData.smallText}</div>}
  // 方式2：使用可选链操作符
  {bannerData?.smallText}
  

• 核对Sanity字段名匹配度
  登录Sanity后台检查字段定义，确保代码中使用的字段名（比如smallText）和schema里的字段名称完全一致。如果后台字段是small_text（蛇形命名），前端返回的字段名也会是small_text，不能写成驼峰式的smallText。

• 检查组件props传递逻辑
  如果HeroBanner是子组件，确认父组件（如index.js）是否正确传递数据：

  // index.js中调用子组件
  <HeroBanner heroBanner={bannerData} />
  

  同时子组件要正确接收props：

  // HeroBanner.jsx
  export default function HeroBanner({ heroBanner }) {
    return <div>{heroBanner?.smallText}</div>
  }
  

  若传参时变量名不匹配（比如父组件传bannerData，子组件接收heroBanner），会导致无法获取数据。

• 确认Sanity数据已发布
  确保你在Sanity后台修改的数据已经点击了Publish按钮，未发布的草稿数据默认不会被前端接口获取到。

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