Next.js开发Airbnb克隆项目：收藏功能失效问题求助

问题梳理 #

• 点击心形按钮后收到成功提示，但按钮颜色未切换
• 收藏操作未写入MongoDB数据库
• hasFavorited变量始终返回false，原因是用户的favoriteIds数组始终为空

核心修复步骤 #

1. 修复数据库未更新问题（app/api/favorites/[listingId]/route.ts） #

POST请求中，Prisma的update是异步操作，原代码未添加await，导致数据库更新未实际执行，直接返回了Promise对象。

修改POST方法：

export async function POST(request: Request, { params }: { params:IParams } ) {
    const currentUser = await getCurrentUser();
    if (!currentUser) {
        return NextResponse.error();
    }
    
    const { listingId } = params;
    if (!listingId || typeof listingId !== 'string') {
        throw new Error('Invalid ID');
    }

    let favoriteIds = [...(currentUser.favoriteIds || [])];
    favoriteIds.push(listingId);

    // 添加await确保数据库更新完成
    const user = await prisma.user.update({
        where: {
            id: currentUser.id
        },
        data: {
            favoriteIds: favoriteIds
        }
    });
    
    return NextResponse.json(user);
}

2. 验证状态计算与组件更新逻辑 #

• useFavorite.ts中的hasFavorited计算逻辑本身正确，修复数据库后，router.refresh()会重新拉取用户最新数据，useMemo会自动重新计算收藏状态
• HeartButton.tsx中的按钮颜色切换逻辑依赖hasFavorited值，状态更新后颜色会自动切换：

  <AiFillHeart 
      size={24}
      className={
          hasFavorited ? "fill-rose-600" : "fill-neutral-500/70"
      }
  />
  

验证步骤 #

1. 点击心形按钮，检查MongoDB中用户的favoriteIds是否新增/移除对应房源ID
2. 确认按钮颜色随收藏状态切换
3. 查看hasFavorited变量是否正确反映当前收藏状态

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