React Native中Firebase查询时random变量出现ReferenceError问题

问题根源 #

1. 变量作用域问题：第一个.then回调里定义的random是局部变量，第二个.then的回调函数不在同一个作用域内，所以访问不到这个变量，导致ReferenceError: random is not defined。
2. Firebase API使用错误：Firebase v9模块化SDK中，get函数不能直接接收orderByKey()、limitToFirst()作为参数，必须用query()方法将数据库引用与排序、限制条件组合后，再传给get。

修复后的代码 #

import { StyleSheet, Text, View } from 'react-native'
import { db } from '../firebase'
import React, { useEffect, useState } from 'react'
import { ref, get, orderByKey, limitToFirst, query } from 'firebase/database'

const SubScreen2 = () => {
  const [todoData, setToDoData] = useState(null)

  useEffect(() => {
    const fetchRandomFood = async () => {
      try {
        // 获取总节点数
        const countSnapshot = await get(ref(db, "food/Total"))
        const count = countSnapshot.val()
        const random = Math.floor(Math.random() * count)
        console.log(random)

        // 构建查询：按key排序，取前random+1个节点
        const foodQuery = query(ref(db, "food/"), orderByKey(), limitToFirst(random + 1))
        const snapshot = await get(foodQuery)
        
        // 获取随机key并设置数据
        const keys = Object.keys(snapshot.val())
        const randomKey = keys[random]
        setToDoData(snapshot.val()[randomKey])
      } catch (error) {
        console.log(error)
      }
    }

    fetchRandomFood()
  }, [])

  console.log(todoData)
  return (
    <View style={styles.container}>
      {todoData ? (
        <View>
          <Text>{todoData.Description}</Text>
          <Text>{todoData.Location}</Text>
          <Text>{todoData.Halal}</Text>
          <Text>{todoData.OH}</Text>
        </View>
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  )
}

export default SubScreen2

关键修改说明 #

• 改用async/await写法，避免回调嵌套，彻底解决变量作用域问题，代码逻辑更清晰。
• 使用query()方法将数据库引用、排序条件和限制条件组合，完全符合Firebase v9模块化SDK的规范用法。
• 将todoData初始状态设为null，更准确对应数据未加载完成的状态。

内容的提问来源于stack exchange，提问作者L.Calvin