前端导航与Footer组件数据映射失败求助

核心问题排查 #

Footer组件问题

1. 数据路径错误：你的GraphQL查询返回的结构是data.footer.secondRow，但渲染代码中直接使用data.secondRow，跳过了footer层级，导致无法获取到数据。
2. 存在重复渲染代码（冗余，清理后不影响功能）

导航组件问题

1. 复数查询返回数组：查询中的navigations是复数形式，返回的是数组而非单个对象，因此不能直接通过data.navigations.pages访问，需先取数组的第一个元素data.navigations[0].pages。
2. JSX语法错误：渲染代码中title}遗漏了开头的{，应为{title}，语法错误会导致渲染失败。

修正后的代码示例 #

Footer渲染代码

{data && data.footer && data.footer.secondRow && data.footer.secondRow.map(({ id, title, slug }) => (
   <li key={id}>
      <Link to={`/products/${slug}`}>
         {title}
      </Link>
   </li>
))}

导航渲染代码

{data && data.navigations && data.navigations.length > 0 && data.navigations[0].pages && data.navigations[0].pages.map(({ id, title, slug }) => (
     <li key={id}>
       <Link to={`/products/${slug}`}>
         {title}
       </Link>
     </li>
))}

额外调试建议 #

• 针对性打印数据：比如用console.log('footer data:', data.footer)或console.log('navigations data:', data.navigations)，明确每一层的数据结构，避免路径错误。
• 确认复数查询的返回类型：Hygraph中复数查询（结尾带s）默认返回数组，需通过索引访问单个条目。
• 检查JSX语法细节：遗漏的大括号、引号等小错误可能导致渲染失败，可借助ESLint等工具自动检测。

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