WordPress站点遇Uncaught TypeError错误，播放列表切换功能失效求助

问题描述 #

代码在测试服务器正常运行，但部署到WordPress网站后，第43行触发Uncaught TypeError: Cannot set properties of null (setting 'src')错误，导致播放列表无法切换播放器中的视频。相关代码如下：

function fetchPlaylistItems() {
  // 获取隐藏元素中的播放列表ID
  const playlistIdElement = document.getElementById('playlist-id');
  const playlistId = playlistIdElement ? playlistIdElement.dataset.playlistId : null;

  if (!playlistId) {
    console.error('未找到播放列表ID。');
    return;
  }

  const apiKey = 'AIzaSyC_xfwCiUu5BtRHw45Z8M3JeLEnE4El7L4'; // 替换为你的YouTube API密钥
  const apiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${playlistId}&key=${apiKey}`;

  fetch(apiUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error('网络响应异常');
      }
      return response.json();
    })
    .then(data => {
      const playlistItems = data.items;
      const playlistList = document.getElementById('playlist-items');

      // 清空现有列表
      playlistList.innerHTML = '';

      // 逐个添加播放列表项
      playlistItems.forEach(item => {
        const videoId = item.snippet.resourceId.videoId;
        const videoTitle = item.snippet.title;

        const listItem = document.createElement('li');
        const link = document.createElement('a');
        link.href = `https://www.youtube.com/watch?v=${videoId}`;
        link.target = "_blank";
        link.textContent = videoTitle;

        // 点击播放列表项切换播放器视频
        link.addEventListener('click', (e) => {
          e.preventDefault(); // 阻止默认跳转行为
          const player = document.getElementById('youtube-player');
          player.src = `https://www.youtube.com/embed/${videoId}?rel=0`;
        });

        listItem.appendChild(link);
        playlistList.appendChild(listItem);
      });
    })
    .catch(error => {
      console.error('加载播放列表出错:', error);
      const playlistList = document.getElementById('playlist-items');
      playlistList.innerHTML = '<li>无法加载播放列表，请稍后重试。</li>';
    });
}

// 页面加载时执行函数
window.onload = fetchPlaylistItems;

错误原因 #

该错误的核心是document.getElementById('youtube-player')返回了null——页面中找不到ID为youtube-player的播放器元素，因此无法设置src属性。常见诱因包括：

• 页面中不存在该ID的元素，或ID拼写错误
• WordPress主题/插件修改了DOM结构，移除或重命名了播放器元素
• 脚本执行时机过早，播放器元素还未加载完成就执行了获取元素的代码
• 其他JS脚本动态修改页面，导致播放器元素被移除

解决方案 #

1. 添加元素存在性判断，避免报错 #

修改点击事件中的代码，先检查播放器元素是否存在，再执行后续操作：

link.addEventListener('click', (e) => {
  e.preventDefault();
  const player = document.getElementById('youtube-player');
  if (player) {
    player.src = `https://www.youtube.com/embed/${videoId}?rel=0`;
  } else {
    console.error('未找到ID为youtube-player的播放器元素');
  }
});

2. 确认播放器元素的存在与ID正确性 #

打开浏览器开发者工具（F12），在Elements标签中搜索youtube-player，确认：

• 页面中确实存在该ID的元素
• 元素ID未被主题或插件修改（比如被添加了前缀，变成wp-youtube-player）

3. 调整脚本加载时机 #

WordPress中若脚本加载在<head>里，可能出现DOM未完全加载的情况：

• 通过WordPress的wp_enqueue_script函数设置$in_footer = true，将脚本放在页面底部加载
• 改用DOMContentLoaded事件代替window.onload，触发时机更可靠：

  document.addEventListener('DOMContentLoaded', fetchPlaylistItems);
  // 替换原代码中的 window.onload = fetchPlaylistItems;
  

4. 排查主题与插件冲突 #

暂时禁用其他插件，切换到WordPress默认主题（如Twenty Twenty-Four），测试问题是否消失，以此排查是否是其他代码干扰了DOM结构。

内容的提问来源于stack exchange，提问作者mr potato guy