使用Spotify Web Playback SDK播放/切歌时触发this._streamer is null错误

这个错误核心是调用播放器方法时，SDK底层的流对象未初始化或已失效。结合你的代码，主要原因及解决方法如下：

1. Access Token 未实时更新，导致授权失效 #

你在getOAuthToken回调中直接传入了组件初始化时的spotifyAccessToken，如果token过期后未刷新，播放器会失去有效授权，底层流对象被销毁，调用方法时就会触发this._streamer is null错误。

解决方法：
修改getOAuthToken回调，确保每次获取token时都能拿到最新的有效值：

getOAuthToken: cb => {
  // 直接从cookies中获取最新的access_token
  cb(cookies.userSpotifyAuth.access_token);
}

同时，必须实现token自动刷新机制，在token过期前更新并同步到cookies，避免授权中断。

2. 播放器实例引用异常，调用时机过早 #

你使用useState存储播放器实例，但setPlayer是异步操作，可能出现组件渲染时player仍为null，但isPlaybackActive已被设为true的情况，此时点击按钮调用播放器方法会报错。

解决方法：
改用useRef存储播放器实例，避免异步更新导致的引用问题：

// 替换原有的useState(player)
const playerRef = useRef(null);

// 初始化播放器时：
playerRef.current = new window.Spotify.Player({
  name: 'Web Playback SDK',
  getOAuthToken: cb => { cb(cookies.userSpotifyAuth.access_token); },
  volume: 0.5
});

// 按钮点击事件中使用ref调用方法：
<button className="btn-spotify" onClick={() => { playerRef.current?.previousTrack() }} >
  &lt;&lt;
</button>

可选：在调用方法前增加状态检查，确保流对象存在：

const handlePrevious = () => {
  if (playerRef.current && !playerRef.current._streamer) return;
  playerRef.current.previousTrack();
}

3. 播放转移逻辑时序错误 #

deviceId生成后立即调用transferPlayback，但此时播放器可能还未完成底层流的初始化，API发送的播放命令无法被正确处理，导致流对象初始化失败。

解决方法：
在ready回调中延迟执行播放转移，或等待player_state_changed回调触发后再执行：

player.addListener('ready', async ({ device_id }) => {
  console.log('Ready with Device ID', device_id);
  setDeviceId(device_id);
  // 延迟1秒确保播放器完全就绪
  setTimeout(async () => {
    await fetch('https://api.spotify.com/v1/me/player', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + cookies.userSpotifyAuth.access_token
      },
      body: JSON.stringify({
        device_ids: [device_id],
        play: true
      })
    });
  }, 1000);
});

同时，要处理transferPlayback的请求错误，比如打印响应状态，确认请求是否成功。

4. 重复加载SDK脚本引发冲突 #

你的useEffect依赖为空数组，每次组件挂载都会添加一次SDK脚本，多次加载会导致SDK内部状态混乱，引发流对象异常。

解决方法：
添加脚本加载判断，避免重复加载：

useEffect(() => {
  // 检查是否已加载SDK脚本
  const existingScript = document.querySelector('script[src="https://sdk.scdn.co/spotify-player.js"]');
  if (existingScript) {
    if (window.Spotify) {
      initPlayer();
    } else {
      window.onSpotifyWebPlaybackSDKReady = initPlayer;
    }
    return;
  }

  const script = document.createElement("script");
  script.src = "https://sdk.scdn.co/spotify-player.js";
  script.async = true;
  document.body.appendChild(script);

  function initPlayer() {
    playerRef.current = new window.Spotify.Player({
      name: 'Web Playback SDK',
      getOAuthToken: cb => { cb(cookies.userSpotifyAuth.access_token); },
      volume: 0.5
    });
    // 后续的监听、连接逻辑...
  }

  window.onSpotifyWebPlaybackSDKReady = initPlayer;

  // 组件卸载时清理资源
  return () => {
    if (playerRef.current) {
      playerRef.current.disconnect();
    }
    if (existingScript) {
      document.body.removeChild(existingScript);
    }
  };
}, [cookies.userSpotifyAuth.access_token]); // 添加token作为依赖，token更新时重新初始化播放器

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