Next.js接入AWS Amplify出现Cannot read property 'items' of undefined报错

错误提示Cannot read property 'items' of undefined说明代码中访问items属性的上级对象listMainDetailss为undefined，具体原因通常为以下几种：

• GraphQL返回字段名和代码中写的不匹配：你调用的查询是listMainDetails，但代码里取返回值时写的是listMainDetailss（多了末尾的s），Amplify自动生成的GraphQL返回结果的key默认和查询名一致，大概率是这里的拼写错误导致找不到对应字段
• 查询未正常返回结果：可能是权限校验失败、GraphQL查询本身报错、数据库中没有初始化对应表数据，导致返回的data字段下没有预期的查询结果
• Amplify配置未同步：修改过GraphQL schema后没有执行amplify push重新生成接口代码，导致本地查询定义和云端API不匹配

1. 先添加调试日志确认返回结构
   修改fetchListMainDetailss函数，先打印完整的查询返回结果，确认实际的字段名和结构：

async function fetchListMainDetailss() {
  try {
    const mainDetails = await API.graphql({
      query: listMainDetails
    });
    // 打印返回结果，在浏览器控制台查看实际结构
    console.log('GraphQL查询返回结果：', mainDetails)
    setIsLoading(false);
  } catch (err) {
    console.error('查询请求报错：', err)
    setIsLoading(false);
  }
}

2. 修正字段名拼写错误
   如果日志确认返回的data下的key是listMainDetails，没有多余的s，将赋值行修改为：

// 用可选链避免空值报错，同时做兜底判断
const items = mainDetails?.data?.listMainDetails?.items || []
if (items.length > 0) {
  setListMainDetails(items[0])
}

3. 处理权限和数据问题

• 到AWS AppSync控制台直接执行listMainDetails查询，确认接口本身可以正常返回数据
• 检查DynamoDB对应的表中是否已经插入了至少一条简历数据，如果没有先初始化一条数据
• 如果schema设置了@auth权限规则，确认当前访问页面的用户符合权限要求，或者临时将权限调整为公开访问测试，修改后重新执行amplify push同步配置

4. 优化空值兼容逻辑
   将加载判断逻辑提前，避免异步请求还没返回就执行赋值操作，完整的修改后函数参考：

async function fetchListMainDetailss() {
  try {
    const mainDetails = await API.graphql({
      query: listMainDetails
    });
    const items = mainDetails?.data?.listMainDetails?.items || []
    if(items.length > 0) {
      setListMainDetails(items[0]);
    }
  } catch (err) {
    console.error('加载简历数据失败：', err)
  } finally {
    setIsLoading(false);
  }
}

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