如何解决Fetch API调用后卡片显示undefined及404错误问题

核心问题分析 #

• 字段访问路径错误：Airtable API返回的记录数据，所有字段值都嵌套在fields属性下，直接访问values.name、values.occupation会找不到对应值，导致显示undefined。
• 图片资源路径错误：Airtable中的附件字段（如avatar）返回的是数组格式，每个元素包含url属性，直接用values.avatar会把整个数组转为字符串，浏览器解析时会将无效内容识别为路径，引发404请求。

修正后的代码 #

fetch("https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=key4v56MUqVr9sNJv")
  .then((data) => {
    return data.json();
  })
  .then((completedata) => {
    let data1 = "";
    completedata.records.map((record) => {
      const fields = record.fields;
      // 处理头像：取附件数组第一个元素的url，无数据时设为空字符串避免报错
      const avatarUrl = fields.avatar ? fields.avatar[0].url : "";
      data1 += ` 
      <div class="card">
          <img src="${avatarUrl}" alt="Avatar" class="avatar">
          <p class="name">${fields.name || "未设置名称"}</p>
          <p class="occupation">${fields.occupation || "未设置职业"}</p>
      </div>
      `;
    });
    document.getElementById("card").innerHTML = data1;
  })
  .catch((error) => {
    console.log(error);
  })

关键修改说明 #

1. 改用record.fields访问实际字段数据，遵循Airtable API的标准返回结构。
2. 对头像字段做安全校验：先判断字段是否存在，再取第一个附件的url，避免字段为空时触发错误。
3. 给文本字段添加默认值，防止字段为空时页面显示undefined。

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