基于Firebase与Next.js实现社交媒体点赞系统：修复数组判断问题

你的问题出在硬编码了数组索引[1]，只会检查likedBy数组的第二个元素，完全没遍历整个数组。要实现预期逻辑，用数组的some()方法来判断当前用户邮箱是否存在于likedBy数组中就行，这个方法会遍历数组，只要有一个元素符合条件就返回true，刚好适合判断“是否已点赞”。

修改后的核心逻辑代码 #

<button onClick={() => {
    // 用some()遍历likedBy数组，检查当前用户是否已点赞
    const hasLiked = currentData.likedBy.some(item => item.name === email);
    
    if(hasLiked){
        setLiked(false);
        updateDoc(doc(db, 'posts', currentData.id), {
            likes: Number(currentData.likes - 1),
            likedBy: arrayRemove({name: email}) // 统一用email变量，避免重复取localStorage
        });
        refreshag();
    } else {
        setLiked(true);
        updateDoc(doc(db, 'posts', currentData.id), {
            likes: Number(currentData.likes + 1),
            likedBy: arrayUnion({name: email})
        });
        refreshag();
    }
}}>
    {liked ? (<span className='text-red-600'><AiFillHeart size={30} /></span>) : (<AiOutlineHeart size={30} />)}
</button>

关键修改点 #

• 把currentData.likedBy[1].name === email替换成currentData.likedBy.some(item => item.name === email)，实现全数组遍历检查
• 统一使用email变量，不要在两处分别用email和localStorage.getItem("email")，避免因localStorage取值异常导致的逻辑错误
• 给setLiked调用加上分号（可选，但符合代码规范）

额外注意事项 #

• 确保currentData.likedBy始终是数组类型，避免出现Cannot read property 'some' of undefined的错误，可以在使用前加个兜底：(currentData.likedBy || []).some(...)
• 如果你的liked状态是初始化时设置的，记得在组件挂载或currentData更新时，也用同样的some()方法来同步初始状态，比如：

  useEffect(() => {
      if(currentData?.likedBy){
          setLiked(currentData.likedBy.some(item => item.name === email));
      }
  }, [currentData, email]);
  

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