调用TMDb API获取数据时，电影标题字段存在original_title与original_name兼容问题

问题根源很明确：trending/all接口返回的内容包含电影和剧集两类数据，两者的标题存储字段不一样：

• 电影类对象用original_title存标题
• 剧集类对象用original_name存标题
  只解构其中一个字段的话，要么会拿到undefined（比如给剧集取original_title），要么触发引用错误（没解构对应字段就直接调用）。

修复方案 #

同时解构两个标题字段，用**空值合并运算符??**优先取电影标题，没有则用剧集标题；另外还要注意日期字段的差异（电影用release_date，剧集用first_air_date），以及变量声明的规范问题。

修改后的完整代码：

const APIKey = '<api_key>'; // 替换为你的API Key
const APIUrl = `https://api.themoviedb.org/3/trending/all/day?api_key=${APIKey}&page=1`;
const imagePath = "https://image.tmdb.org/t/p/w500";

getTrendingMovieData(APIUrl);
async function getTrendingMovieData(url) {
    const resp = await fetch(url);
    const data = await resp.json();
    console.log(data.results);
    showTrendingMovies(data.results);
};

function showTrendingMovies(movies) {
    movies.forEach(movie => {
        const trending = document.createElement("div"); // 添加const声明，避免全局变量污染
        trending.classList.add('movie');
        // 同时解构两类内容的标题和日期字段
        const { id, original_title, original_name, release_date, first_air_date } = movie;
        // 优先取电影标题/日期，没有则用剧集的
        const title = original_title ?? original_name;
        const releaseDate = release_date ?? first_air_date;
        
        trending.innerHTML = `
        <img src="${imagePath + movie.poster_path}" alt="${id}">
        <div class="movie-info">
            <p id="title">${title}</p>
            <div class="date-genre">
                <p>${releaseDate}<span>Thriller</span></p>
            </div>
            <div class="review">
                <i class="fa-solid fa-star" id="star"></i><p>7.4 <span>(85,000)</span></p>
            </div>
        </div> 
        `;
        document.getElementById("trending-movies").appendChild(trending);
    });
};

关键修改点 #

1. 解构时同时获取original_title和original_name，避免未声明变量的引用错误
2. 用??运算符处理标题和日期，确保总有有效值显示（比||更严谨，不会把空字符串这类合法值误判）
3. 给trending变量添加const声明，避免全局变量污染
4. 把APIUrl里的硬编码API Key改成变量拼接，更易维护

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