React项目报错：Uncaught (in promise) TypeError: 无法读取undefined的'id'

问题根源 #

你遇到的问题本质是TinderCard的onSwipe回调调用addTowatchlist时，没有传入当前要操作的movie对象，导致函数内部movie为undefined。加可选链movie?.id只是屏蔽了报错，但因为movie本身不存在，movie?.id返回undefined，自然没法把有效ID存入Supabase的watchlists表。

具体修复步骤 #

1. 修正TinderCard的onSwipe调用，传入当前movie对象
   假设你是在遍历电影列表渲染TinderCard，要确保每个卡片的回调都把对应的movie传进去：

   // 错误写法（没传movie）
   {movies.map(movie => (
     <TinderCard key={movie.id} onSwipe={() => addTowatchlist()}>
       {/* 电影内容渲染 */}
     </TinderCard>
   ))}
   
   // 正确写法（传入当前movie）
   {movies.map(movie => (
     <TinderCard key={movie.id} onSwipe={() => addTowatchlist(movie)}>
       {/* 电影内容渲染 */}
     </TinderCard>
   ))}
   

2. 优化addTowatchlist函数的参数校验（可选但更健壮）
   在函数里先做参数校验，避免后续出现类似问题：

   const addTowatchlist = async (movie) => {
     // 先检查movie和movie.id是否存在
     if (!movie || !movie.id) {
       console.error("无法添加到收藏：电影数据无效");
       return;
     }
     // 调用Supabase插入数据
     const { error } = await supabase
       .from('watchlists')
       .insert([{ movie_id: movie.id }]);
     if (error) {
       console.error("添加失败：", error);
     } else {
       console.log("电影已添加到收藏");
     }
   };
   

3. 移除不必要的可选链
   当确认movie能正确传入后，把movie?.id改回movie.id——这样如果后续再出现参数传递错误，能及时通过报错发现问题，而不是静默失败。

为什么之前的可选链没用？ #

因为movie本身是undefined，movie?.id会直接返回undefined，Supabase插入的是一个没有movie_id的空对象（或者字段值为null），自然看不到存入的电影ID。只有传入有效的movie对象，才能拿到正确的id值。

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