MongoDB大整数字段传输至React客户端失真，async/await是原因吗？

问题原因 #

这和async/await完全无关，根源是JavaScript Number类型的精度限制：
JavaScript的Number是64位浮点数，最大安全整数为2^53 - 1（即9007199254740991），而你的tweet_id: 1537466989966413825远大于这个阈值。当数据从MongoDB通过JSON序列化传输到客户端时，大整数会被自动转成不精确的Number，导致末尾数值被截断修正。

MongoDB内置终端能正常显示，是因为它直接读取数据库原始整数值，没有经过JSON的Number转换流程。

解决方案 #

方案1：服务端将大整数转为字符串返回 #

修改MongoDB App Services的云函数，把tweet_id转换为字符串后再返回，避免JSON序列化时的精度丢失：

exports = function(){
  var collection = context.services.get("mongodb-atlas").db("meme_news").collection("news");
  return collection.find({}).toArray().then(docs => {
    return docs.map(doc => ({
      ...doc,
      tweet_id: doc.tweet_id.toString()
    }));
  });
};

注意必须先调用toArray()将查询游标转为数组，再逐个处理文档字段。

方案2：客户端用BigInt处理（需配合方案1） #

如果需要对tweet_id做数值运算，可在客户端将字符串转为BigInt类型：

useEffect(() => {
  getData();
}, []);

const getData = async () => {
  let getAllData = await user.functions.getAllData();
  let tweetId = getAllData.map(ele => BigInt(ele.tweet_id));
  let tweetIdFirstEle = tweetId[0];
  // 此时值为精确的1537466989966413825n（BigInt类型）
};

⚠️ 若直接从服务端接收Number类型的tweet_id，再转BigInt也无法恢复精度——因为传输过程中精度已经丢失，必须先在服务端转成字符串。

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