如何在Gatsby中循环访问ACF灵活内容？

import React from "react"
import { graphql } from "gatsby"

export const query = graphql`
  query($slug: String!) {
    wordpressPost(slug: { eq: $slug }) {
      acf {
        flexible_content_field_name {
          __typename
          ... on WordPressAcf_text_field {
            id
            text_field_name
          }
          ... on WordPressAcf_image_field {
            id
            image_field_name {
              localFile {
                publicURL
              }
            }
          }
          // 可以根据你的ACF字段类型进行相应的处理
        }
      }
    }
  }
`

const MyComponent = ({ data }) => {
  const acfData = data.wordpressPost.acf.flexible_content_field_name

  return (
    <div>
      {acfData.map(item => {
        if (item.__typename === "WordPressAcf_text_field") {
          return (
            <div key={item.id}>
              <p>{item.text_field_name}</p>
            </div>
          )
        }
        if (item.__typename === "WordPressAcf_image_field") {
          return (
            <div key={item.id}>
              <img src={item.image_field_name.localFile.publicURL} alt="" />
            </div>
          )
        }
        // 根据ACF字段类型添加相应的处理逻辑
        return null
      })}
    </div>
  )
}

export default MyComponent