React Native中Firebase Query.where()参数无效问题求助

错误原因分析 #

你当前代码的核心问题有两个：

• State用途混淆：userData被用来存储消息列表（初始值为[]），但你错误地用userData.uid作为查询条件，自然会得到undefined，触发Firebase的参数校验错误。
• 未正确获取登录用户UID：组件初始化时没有从Firebase Auth获取有效用户身份，直接用错误的state值构建查询。

修复步骤及代码示例 #

1. 调整State定义 #

拆分存储消息和用户UID的state，避免命名混淆：

const UserInbox = () => {
    // 存储当前登录用户的UID
    const [currentUserUID, setCurrentUserUID] = useState(null);
    // 存储用户的消息列表
    const [messages, setMessages] = useState([]);
    const [recipient, setRecipient] = useState("");
    const [messageText, setMessageText] = useState("");
    const [modalVisible, setModalVisible] = useState(false); // 补充你遗漏的弹窗状态
    const [loading, setLoading] = useState(true); // 补充加载状态

2. 监听Firebase Auth登录状态 #

在组件挂载时监听用户登录状态，确保获取到有效UID后再拉取数据：

useEffect(() => {
    // 监听用户登录状态变化
    const unsubscribe = auth.onAuthStateChanged((user) => {
        if (user) {
            // 用户已登录，保存UID
            setCurrentUserUID(user.uid);
        } else {
            // 用户未登录，清空UID和消息列表
            setCurrentUserUID(null);
            setMessages([]);
        }
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
}, []);

3. 修正数据拉取逻辑 #

只有当currentUserUID存在时才发起查询，并且把查询逻辑移到fetchData内部（避免组件重复渲染时重复创建查询）：

const fetchData = async () => {
    if (!currentUserUID) return; // 无有效UID时直接返回，避免错误

    try {
        setLoading(true);
        const list = [];
        const querySnapshot = await db.collection('feedback')
            .where('recipient', '==', currentUserUID)
            // .orderBy('submitTime','desc') // 如需排序，需在Firebase控制台添加对应复合索引
            .get();

        querySnapshot.forEach((doc) => {
            const { userId, recipient, messageText } = doc.data();
            list.push({
                id: doc.id,
                userId,
                recipient,
                messageText
            });
        });

        setMessages(list);
    } catch (error) {
        console.error('拉取消息失败:', error);
    } finally {
        setLoading(false);
    }
};

// 当用户UID变化时重新拉取数据
useEffect(() => {
    fetchData();
}, [currentUserUID]);

4. 调整UI渲染部分 #

将原来的userData替换为修正后的messages，并补充加载状态的展示：

function renderBody() {
    if (loading) {
        return (
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <ActivityIndicator size="large" />
            </View>
        );
    }

    return (
        <ScrollView>
            <FlatList 
                data={messages}
                numColumns={1}
                renderItem={({item})=>(
                    <>
                        <Swipeable renderRightActions={()=>ListItemDelet(item.id)}> 
                            <View>
                                <View>
                                    <View style={{flexDirection:'row'}}>
                                        <View>
                                            <Text></Text>
                                            <Text>{item.recipient}</Text>
                                        </View>  
                                        <TouchableOpacity  
                                            onPress={()=>{
                                                setRecipient(item.recipient);
                                                setMessageText(item.messageText);
                                                setModalVisible(true);
                                            }}>
                                            <Text style={{fontWeight:'600'}}>View</Text>
                                        </TouchableOpacity>
                                    </View>                    
                                </View>
                            </View>
                        </Swipeable>
                    </>
                )}
            />

            <View style={{position:'absolute', top:100}}>
                <AppModal
                    modalVisible={modalVisible} 
                    setModalVisible={setModalVisible} 
                    name={recipient}
                    messageText={messageText}
                />    
            </View>
        </ScrollView>
    );
}

关键注意事项 #

• 确保Firebase Auth已在项目中正确初始化，用户确实处于登录状态。
• 如果启用orderBy排序，需要在Firebase控制台的数据库规则中添加对应的复合索引，否则会触发排序权限错误。
• 始终在查询前校验UID的有效性，避免传入undefined等无效参数导致Firebase报错。

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