Firebase实时数据库更新报错：RangeError栈溢出求助

问题重现 #

使用Firebase实时数据库创建用户数据正常，但更新countTrains字段时抛出错误：RangeError: Maximum call stack size exceeded, js engine: hermes。

创建用户数据代码 #

set(ref(db, 'users/' + res.data.localId), {          
  name: name,
  surname: surname,
  email: email,
  countTrains: 0
}).then(() => {
  console.log('Made new account');    
})  
.catch((error) => {
  console.log(error);
});

更新数据代码 #

update(ref(db, 'users/' + user.localId), {          
  countTrains: countTrain,
}).then(() => {
  alert('data updated!');    
})  
.catch((error) => {
  alert(error);
});

导航传参相关代码 #

参数接收：

const countTrain = route.params.count

参数传递页面：

const [count, setCount] = useState(1);
onPress(() => {
  toResult();
  setCount(count + 1);

const toResult = () => {
  navigation.navigate('Result',  {count})
}

问题分析与解决方案 #

1. 排查无限循环触发逻辑 #

栈溢出核心原因是更新数据库的代码被反复触发，形成无限循环：

• 检查update代码的执行时机：确保它只绑定在用户主动操作（如按钮点击）上，而非组件渲染、无依赖的useEffect中（这类场景会导致更新后触发重渲染，再次执行更新）。
• 若用useEffect包裹更新逻辑，必须添加精准的依赖项，避免无意义的重复执行。

2. 修复导航传参的逻辑错误 #

当前传参先调用toResult再执行setCount，传递的是旧值，虽非栈溢出直接原因，但会导致数据不准确，需修正：

const [count, setCount] = useState(1);

const toResult = (newCount) => {
  navigation.navigate('Result', {count: newCount})
}

// 点击事件处理
onPress(() => {
  setCount(prevCount => {
    const newCount = prevCount + 1;
    toResult(newCount);
    return newCount;
  });
});

3. 验证countTrain的有效性 #

在执行update前添加日志，确认countTrain是普通数字，而非循环引用对象或异常值：

console.log('countTrain value:', countTrain, typeof countTrain);
update(ref(db, 'users/' + user.localId), {          
  countTrains: countTrain,
})
// ...后续代码

非数字类型的countTrain可能导致Firebase内部处理异常，间接触发栈溢出。

4. 确认Firebase引用路径 #

检查user.localId是否为有效字符串，避免生成错误路径：

const userRef = ref(db, 'users/' + user.localId);
console.log('Firebase ref path:', userRef.toString());
update(userRef, { countTrains: countTrain })
// ...后续代码

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