React Native中Firebase实时数据库数据转JSON对象的问题

核心问题 #

你遇到的JSON Parse error: Unexpected token: o是因为你要解析的数据已经是JavaScript对象了，JSON.parse()只能用于解析JSON格式的字符串，对对象调用它自然会报错。而数据显示为[object object]是因为直接将对象与字符串拼接时，JavaScript会自动把对象转为[object Object]字符串。

另外你的Firebase数据获取代码存在用法错误：toJSON()方法的使用不符合Firebase SDK规范，正确做法是直接通过快照的val()方法获取数据对象。

修正步骤 #

1. 修正数据获取函数 #

将readUserData函数修改为直接返回快照的val()结果，这已经是可直接使用的JavaScript对象：

const readUserData = async (phoneNumber) => {
  try {
    const reference = ref(db, 'x123456/' + phoneNumber);
    const snapshot = await get(reference);
    // snapshot.val() 直接返回JavaScript对象
    const userData = snapshot.val();
    console.log('DATA:', userData); // 不要用+拼接，直接打印对象可查看完整结构
    return userData;
  } catch (error) {
    console.error(error);
    return null;
  }
};

2. 正确调用并提取字段 #

调用函数后，直接通过对象属性访问提取Address等字段，无需任何解析操作：

try {
  const exist = await readUserData('+91' + phoneNumber);
  console.log('user:', exist); // 直接打印对象，比JSON.stringify更直观
  // 提取Address字段
  if (exist) {
    const userAddress = exist.Address;
    console.log('用户地址:', userAddress);
    // 其他字段同理
    const userName = exist.name;
    const userAge = exist.Age;
  }
} catch (error) {
  alert(error);
}

关键说明 #

• 从Firebase实时数据库获取的val()结果本身就是JavaScript对象，不需要JSON.parse()，也不需要toJSON()转换。
• 仅当需要将对象转为字符串用于存储或传输时，才需要使用JSON.stringify()，日常操作直接访问对象属性即可。
• 避免用console.log('DATA: ' + data)这种字符串拼接方式打印对象，直接console.log('DATA:', data)才能看到对象的完整结构。

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