控制台输出首页数据显示Undefined问题排查（已解决）

1. 修复useQuery的解构错误 #

你的logoassetsQuery部分存在解构错误，错误地将error字段别名成了logoassetsData，导致你拿到的不是查询数据而是错误对象：

// 错误代码
const { loading: logoAssetsLoading, error: logoassetsData } = useQuery(logoassetsQuery);

// 修复后
const { loading: logoAssetsLoading, error: logoassetsError, data: logoassetsData } = useQuery(logoassetsQuery);

同时补充Logo查询的错误处理：

if (logoassetsError) return <p>加载Logo资源失败 :(</p>;

2. 修正查询结果的属性访问与遍历逻辑 #

（1）属性名拼写错误

你的查询名称是homeLinks，但控制台和组件里多次写成了homeLink（少了末尾的s），导致无法正确访问数据：

// 错误代码
console.log(homeData && homeData?.homeLink?.pages);

// 修复后
console.log(homeData && homeData?.homeLinks?.pages);

（2）数组遍历方法错误

homeData?.homeLinks?.pages是数组，你错误地使用了不存在的page方法，应该用map遍历数组：

// 错误代码
homeData?.homeLinks?.page(link => (/* ... */))

// 修复后
homeData?.homeLinks?.pages.map(link => (
  <li key={link?.id}>
    <Link to={`/${link?.slug}`}>
      <img src={logoassetsData?.logoAssets} alt='main logo'/>
    </Link>
  </li>
))

3. 确认查询结果结构一致性 #

在Hygraph的GraphQL Playground中执行查询后，确认返回的数据结构是否与代码中的访问路径匹配。正确的返回结构应该类似：

{
  "data": {
    "homeLinks": {
      "pages": [
        { "id": "clbzl7ovpe64d0ak5qh7o2p8f", "slug": "Home", "title": "Home" }
      ]
    }
  }
}

如果结构不符，需要对应调整代码中的属性访问路径。

4. 验证Webpack别名（可选） #

若怀疑别名配置问题，可在组件中打印文件路径验证别名是否生效：

console.log(require.resolve("queries/navigation/homeLinks"));

确认输出路径指向src/queries/navigation/homeLinks.js（或对应扩展名）。

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