运行JS代码时出现TypeError: Failed to construct 'URL': Invalid URL报错求助

你遇到的问题根源在于movieTrailer(movie?.name || "")返回的url可能不是有效的完整URL（比如返回null、undefined或格式错误的字符串），导致new URL(url)无法正常构造URL对象。而你的测试代码用的是明确有效的YouTube URL，所以不会触发错误。

修复方案： #

• 在处理URL前，先验证返回的url是否存在且符合URL格式
• 增加兜底逻辑，避免无效值进入URL构造步骤

修改后的代码如下：

const handleClick = (movie) => {
  if(trailerUrl){
    setTrailerUrl("")
  }else{
    movieTrailer(movie?.name || "")
      .then((url) => {
        // 先验证url是否有效
        if (!url) {
          console.log("未找到该影片的预告片链接");
          return;
        }
        try {
          const urlParams = new URLSearchParams(new URL(url).search);
          setTrailerUrl(urlParams.get("v"));
        } catch (err) {
          console.log("解析URL失败：", err);
        }
      })
      .catch((error) => console.log(error))
  }
}

额外优化点： #

• 提前判断movie?.name是否为空，避免传入空字符串调用movieTrailer，减少无效请求
• 给movieTrailer的调用增加更明确的错误分类，区分“未找到预告片”和“URL解析错误”

const handleClick = (movie) => {
  if(trailerUrl){
    setTrailerUrl("")
    return;
  }
  
  const movieName = movie?.name;
  if (!movieName) {
    console.log("影片名称为空，无法查找预告片");
    return;
  }
  
  movieTrailer(movieName)
    .then((url) => {
      if (!url) {
        console.log(`未找到影片「${movieName}」的预告片`);
        return;
      }
      try {
        const urlObj = new URL(url);
        const urlParams = new URLSearchParams(urlObj.search);
        setTrailerUrl(urlParams.get("v"));
      } catch (err) {
        console.log(`解析预告片URL失败：${err.message}`);
      }
    })
    .catch((error) => console.log(`查找预告片时出错：${error.message}`))
}

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