React组件Url构造失败：部分海报无播放窗口且无法播放预告片求助

问题根源分析 #

1. 部分海报点击无播放窗口：调用movieTrailer时仅传入movie?.name，但TMDB返回数据中，电影类条目使用title字段，剧集类才用name，导致部分电影无法匹配到预告片，无法触发播放窗口显示。
2. 所有预告片无法播放：<YouTube>组件的videoId属性被错误包裹在引号中，变成固定字符串"{trailerUrl}"，而非动态读取trailerUrl变量，播放器无法获取正确视频ID。

代码修复步骤 #

修复1：兼容电影/剧集的标题字段 #

修改handleClick函数，同时尝试title和name字段，覆盖不同类型的媒体条目：

const handleClick = (movie) => {
    if (trailerUrl){
        setTrailerUrl('');
    } else {
        // 同时尝试title和name字段，适配电影与剧集
        movieTrailer(movie?.title || movie?.name || "")
        .then ((url) => {
            const urlParams = new URLSearchParams(new URL(url).search);
            setTrailerUrl(urlParams.get("v"));
        }).catch(error => console.log(error));
    }
};

修复2：修正YouTube组件的videoId绑定 #

去掉videoId的引号，直接传入变量：

{trailerUrl && <YouTube videoId={trailerUrl} opts={opts} /> }

可选优化：处理无预告片场景 #

在catch分支添加提示，提升用户体验：

.catch(error => {
    console.log(error);
    alert("该影片暂无预告片");
});

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