使用Spotify API自定义Hook获取播放列表失败，返回空数组

我尝试通过Spotify API获取播放列表数据，已实现自定义Hook useSpotify 获取Spotify API实例，但目前获取到的播放列表是空数组，并非预期的播放列表数据。

获取播放列表的代码 #

const spotifyApi: SpotifyWebApi = useSpotify();
const { data: session, status } = useSession();
const [playlists, setPlaylists] = useState<Array<{ name: string }>>([]);

useEffect(() => {
  if(spotifyApi.getAccessToken()) {
    spotifyApi.getUserPlaylists().then(({data}: any) => {
      setPlaylists(data.body.items);
    })
  }
}, [session, spotifyApi]);

console.log(playlists);

自定义Hook useSpotify 实现代码 #

import { signIn, useSession } from "next-auth/react";
import { useEffect } from "react";
import spotifyApi from "@/lib/spotify";

function useSpotify() {
  const { data: session } = useSession();

  useEffect(() => {
    if (session) {
      // 如果刷新token失败，跳转到登录页
      if ((session as any).error === "RefreshAccessTokenError") {
        signIn();
      }

      spotifyApi.setAccessToken(
        (session.user as { accessToken: string }).accessToken
      );
    }
  }, [session]);

  return spotifyApi;
}

export default useSpotify;

问题分析与解决方案 #

1. 响应数据结构错误 #

spotifyApi.getUserPlaylists() 的返回响应中，播放列表数据直接存于 data.items，而非 data.body.items。Spotify Web API的响应主体就是 data，无需额外取 body 属性。

修改后代码：

spotifyApi.getUserPlaylists().then(({ data }) => {
  setPlaylists(data.items);
})

2. 依赖项与异步时机问题 #

• useSpotify 返回的是同一个 spotifyApi 实例，不应作为 useEffect 的依赖项，否则会触发不必要的重渲染。
• 需确保 session 处于已认证状态（status === "authenticated"）再执行API请求，避免在session未就绪时调用接口。

优化后的 useEffect：

useEffect(() => {
  // 仅当session已认证且存在accessToken时执行请求
  if (status === "authenticated" && spotifyApi.getAccessToken()) {
    spotifyApi.getUserPlaylists()
      .then(({ data }) => {
        setPlaylists(data.items);
      })
      .catch(err => {
        console.error("获取播放列表失败:", err);
      });
  }
}, [status, spotifyApi]);

3. 类型断言优化 #

避免使用 any 类型，建议为session和响应数据定义明确类型，示例：

interface SessionUser {
  accessToken: string;
}

interface SpotifyPlaylist {
  name: string;
  id: string;
  // 按需添加其他字段
}

// 状态定义
const [playlists, setPlaylists] = useState<SpotifyPlaylist[]>([]);

// useSpotify中设置token
spotifyApi.setAccessToken(
  (session.user as SessionUser).accessToken
);

4. 额外排查建议 #

• 打印 spotifyApi.getAccessToken() 的值，确认token是否正确设置。
• 检查Spotify应用是否申请了 playlist-read-private 等必要权限，权限不足会导致接口返回空数据或报错。

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