Gatsby/WordPress跨表取数据时map方法失效问题求助

你的问题核心是没有正确访问GraphQL查询返回的嵌套字段层级：

从你的GraphQL查询可以看到，prodLineColors返回的是WpFarbe类型的节点，而颜色相关的字段（colorType、colorHex等）都嵌套在farben这个ACF字段组对象里，但你在React代码里直接尝试访问color.colorType，自然拿不到数据。

另外，你用console.log('colors: ' + color)会触发对象的字符串转换，所以显示[object object]，要打印完整对象应该用console.log('colors:', color)（去掉加号，用逗号分隔），这样就能在控制台看到完整的结构，方便排查字段层级。

修正后的代码片段： #

{productLines.map((line, index) => {
  console.log('line.prodLineColors:', line.prodLineColors) // 修正console.log写法
  return (
    <div key={'colors_' + index}>
      <h4 className>{line.prodLineName}</h4>
      <div className="grid grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-6">
        {line.prodLineColors.map((color, index) => {
          console.log('color:', color) // 修正console.log写法
          console.log('color farben:', color.farben) // 正确访问嵌套的farben对象

          // 正确访问嵌套字段，用可选链避免报错
          if(color.farben?.colorType === 'img') {
            // 处理图片逻辑示例
            return <img key={index} src={color.farben.colorImg.sourceUrl} alt={color.farben.colorName} />
          } else {
            // 处理颜色块逻辑示例
            return (
              <div key={index} style={{ backgroundColor: color.farben.colorHex }}>
                <span>{color.farben.colorName}</span>
              </div>
            )
          }
        })}
      </div>
    </div>
  )
})}

关键修正点： #

• 所有颜色相关字段必须通过farben对象访问，比如把color.colorType改为color.farben.colorType
• 新增可选链操作符?.（color.farben?.colorType），避免farben为undefined时触发报错
• 修正console.log写法，确保能打印完整对象结构用于调试

这样就能正常获取到选中的颜色数据，循环也能显示预期内容了。

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