如何修复Firestore中用户收藏影片的展示错误？

数据老陈

2026-7-26

问题修复方案

图片加载失败和API无关，核心问题是SavedShows组件中对收藏影片数据的取值逻辑错误：

你在Firestore中存储的每个收藏影片对象是直接包含id、title、img字段的（参考Movie组件中arrayUnion传入的对象结构），但在SavedShows的map循环里，错误地将每个元素解构为{item, id}，并尝试通过item?.img、item?.title取值，这和实际存储的数据结构不匹配，导致图片路径拼接时拿到的是undefined，最终加载失败。

修复后的SavedShows组件代码：

export default function SavedShows() {
  const [movies, setMovies] = React.useState<any>([]);
  const { user }: any = UserAuth();

  React.useEffect(() => {
    onSnapshot(doc(db, "users", `${user?.email}`), (doc) => {
      // 处理数据为空的情况，避免后续map报错
      setMovies(doc.data()?.savedShows || []);
    });
  }, [user?.email]);

  return (
    <>
      <h2>My Movies</h2>
      <div>
        <div>
          {/* 直接解构每个影片对象的属性，不需要外层item */}
          {movies.map((movie: any) => (
            <div key={movie.id}>
              <img
                src={`https://image.tmdb.org/t/p/w500/${movie.img}`}
                alt={movie.title}
              />
              <div>
                <p>{movie.title}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

额外优化建议：

避免使用any类型，为收藏影片定义明确的TypeScript接口，比如：
```
interface SavedMovie {
  id: number;
  title: string;
  img: string;
}
```
然后将useState<any>([])改为useState<SavedMovie[]>([])，提升代码类型安全性。
在Movie组件中，建议对item?.backdrop_path做空值判断，避免拼接出无效的图片URL，比如：
```
src={item?.backdrop_path ? `https://image.tmdb.org/t/p/w500/${item.backdrop_path}` : '默认图片地址'}
```
在SavedShows组件中，当user未登录时，应该添加判断逻辑，避免调用onSnapshot时传入无效的用户邮箱。