使用YouTube API展示视频网格时出现TypeError：无法读取videoId属性

这个错误的核心问题出在变量定义位置和对象访问逻辑上：

• 首先，data.items是包含多个视频对象的数组，你写的let videoId = videos.id.videoId;里，videos是数组本身，数组没有id属性，所以videos.id是undefined，读取videoId自然会抛出Cannot read properties of undefined的错误。
• 其次，获取视频ID的逻辑应该放在forEach循环内部，针对每一个循环的video对象去读取id.videoId，而不是在循环外提前定义这个变量。

修正后的代码示例：

fetch('https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=12&q=software%20quality%20assurance&type=video&videoDuration=short&key=AIzaSyA0c9e2X5lcxnbWGg2QaUJvdo4aDQlXiNM')
.then((result)=>{
    return result.json();
})
.then(data=>{
    console.log(data);
    let videos = data.items;
    let videoContainer = document.querySelector(".youtube_container");
    videos.forEach((video)=>{
        // 针对当前循环的视频对象读取videoId
        let videoId = video.id.videoId;
        videoContainer.innerHTML += 
            `<iframe src = "https://www.youtube.com/embed/${videoId}" frameborder = "0" allowfullscreen></iframe>`;
    })
})

额外提醒：如果API返回的data.items是空数组，后续forEach不会执行，建议可以加个空数组判断，避免潜在的其他问题。

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