React Firebase点赞按钮点击后计数NaN及children属性报错求助

出现NaN的核心原因是post.likeCount初始值不是有效数字：

• 若Firebase文档未设置likeCount字段，读取后post.likeCount为undefined，执行likeCount + 1会得到NaN
• 若likeCount是字符串类型（比如存的时候是"0"），直接加1会变成字符串拼接；如果是无效字符串，则会转成NaN

1. 处理点赞计数的初始值 #

在handleClick里，先把post.likeCount转成数字并设置默认值0，同时推荐用update代替set（避免覆盖文档中未声明的字段）：

const handleClick = async () => {
  // 确保likeCount是数字，不存在则设为0
  let likeCount = Number(post.likeCount) || 0;
  const date = new Date();
  likeCount += 1;

  await db.collection("posts").doc(post.id).update({
    updatedAt: date.toUTCString(),
    likeCount,
  });
};

2. 渲染时确保显示有效数字 #

在Text组件中同样处理post.likeCount，避免渲染NaN：

<Text bg="purple.100" rounded="md" w="100%" p={1}>
  {Number(post.likeCount) || 0}
</Text>

3. 初始化Firebase文档的likeCount（可选） #

新创建帖子时，直接给likeCount设初始值0，从根源避免读取undefined：

// 创建帖子的示例代码
await db.collection("posts").add({
  createdAt: new Date().toUTCString(),
  updatedAt: new Date().toUTCString(),
  likeCount: 0,
  title: "你的帖子标题",
});

可以用Firebase的原子更新方法increment，由服务器端处理计数，彻底解决多用户同时点赞导致的计数不准问题：

import { increment } from "firebase/firestore";

// 替换handleClick里的更新逻辑
const handleClick = async () => {
  const date = new Date();
  await db.collection("posts").doc(post.id).update({
    updatedAt: date.toUTCString(),
    likeCount: increment(1),
  });
};

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