解析Blogger API响应时出现TypeError：无法读取undefined的'url'属性

这个错误的核心原因很明确：你的代码默认每篇Blogger文章都存在media$thumbnail节点，但实际上现在有部分文章没有这个字段，导致直接访问.url时触发了TypeError——你在尝试读取一个undefined对象的属性。

之前功能正常，大概率是因为当时所有文章都包含缩略图，而后续新增的文章（或者Blogger调整了Feed返回逻辑）不再提供这个节点，才突然出现问题。

修复步骤 #

1. 安全处理media$thumbnail节点

在访问media$thumbnail.url之前，先判断这个节点是否存在，同时给无缩略图的情况设置一个默认图片，避免页面显示异常：

// 替换原来的postImage行
var postImage = json.feed.entry[i].media$thumbnail 
  ? json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s640/') 
  : 'https://via.placeholder.com/640x480?text=No+Image'; // 可以替换成你自己的默认图链接

如果你的运行环境支持ES2020+语法，也可以用更简洁的可选链操作符：

var postImage = json.feed.entry[i].media$thumbnail?.url.replace('s72-c/','s640/') || 'https://via.placeholder.com/640x480?text=No+Image';

2. 修复DOM插入的隐藏错误

你的代码里还有一个容易忽略的问题：document.getElementById("news").appendChild(item);中item是HTML字符串，但appendChild只接受DOM节点，这会导致另一个隐性错误。改成用innerHTML来插入内容更合适：

// 替换原来的appendChild行
document.getElementById("news").innerHTML += item;

3. 可选优化：规范变量声明

你在循环里重复声明了var item，虽然var的函数级作用域不会报错，但改成let更符合现代JS的编码规范：

let item = '<div class="col-md-3 mb-4 blogpost-main">';
item += '<div class="card h-100">';
// ...后续拼接代码保持不变

完整修复后的代码 #

function mycallback(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
    // 获取文章链接
    var postUrl = '';
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        postUrl = json.feed.entry[i].link[j].href;
        break;
      }
    }
    
    var postTitle = json.feed.entry[i].title.$t;
    var postAuthor = json.feed.entry[i].author[0].name.$t;
    var postSummary = json.feed.entry[i].summary.$t;
    var entryShort = postSummary.substring(0,400);
    var entryEnd = entryShort.lastIndexOf(" ");
    var postContent = entryShort.substring(0, entryEnd) + '...';
    
    // 安全处理缩略图
    var postImage = json.feed.entry[i].media$thumbnail 
      ? json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s640/') 
      : 'https://via.placeholder.com/640x480?text=No+Image';
    
    var postTimestamp = json.feed.entry[i].published.$t;
    
    let item = '<div class="col-md-3 mb-4 blogpost-main">';
    item += '<div class="card h-100">';
    item += '<img class="card-img-top" src="' + postImage + '"/>';
    item += '<div class="card-body">';
    item += '<a href=' + postUrl + '><h6 class="card-title">' + postTitle + '</h6></a>';
    item += '<p class="card-text text-muted"><i class="far fa-clock" style="color: #888"></i> <time class="timeago" datetime= '+ postTimestamp +'>' + postTimestamp + '</time></p>';
    item += '</div>';
    item += '</div>';
    item += '</div>';
    
    // 正确插入DOM
    document.getElementById("news").innerHTML += item;
    console.log(item);
  }
}

额外建议 #

• 可以在控制台打印json.feed.entry[i]，查看具体哪篇文章没有media$thumbnail节点，进一步确认问题根源。
• 如果Blogger后续还有其他节点调整，建议在访问嵌套属性前都做存在性检查，避免类似的TypeError再次出现。

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