React JS：如何从Firebase Firestore的users集合获取用户名并显示？

首先确认你的users集合中文档ID是否和Firebase Auth用户的UID一致（这是存储用户数据的常规方式），以下是主流平台的实现方案：

1. Web平台（JavaScript） #

先获取当前登录用户的UID，再查询对应文档：

// 引入Firebase Auth和Firestore模块
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getFirestore, doc, getDoc } from "firebase/firestore";

const auth = getAuth();
const db = getFirestore();

// 监听用户登录状态
onAuthStateChanged(auth, async (user) => {
  if (user) {
    const uid = user.uid;
    // 指向users集合下的用户文档
    const userDocRef = doc(db, "users", uid);
    const userDocSnap = await getDoc(userDocRef);
    
    if (userDocSnap.exists()) {
      // 提取username字段
      const username = userDocSnap.data().username;
      // 将用户名渲染到设置页面的指定元素
      document.getElementById("username-display").textContent = username;
    } else {
      console.log("用户文档不存在");
    }
  } else {
    console.log("用户未登录");
  }
});

2. Flutter平台 #

借助Firebase Auth和Cloud Firestore插件实现：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class SettingsPage extends StatefulWidget {
  const SettingsPage({super.key});

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  String? _username;

  @override
  void initState() {
    super.initState();
    _fetchUsername();
  }

  Future<void> _fetchUsername() async {
    final currentUser = FirebaseAuth.instance.currentUser;
    if (currentUser != null) {
      final docSnapshot = await FirebaseFirestore.instance.collection('users').doc(currentUser.uid).get();
      if (docSnapshot.exists) {
        setState(() {
          _username = docSnapshot.data()?['username'];
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('设置')),
      body: Center(
        child: _username != null 
            ? Text('用户名: $_username') 
            : const CircularProgressIndicator(),
      ),
    );
  }
}

3. Android平台（Kotlin） #

结合Firebase Auth与Firestore SDK：

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.firestore.FirebaseFirestore

class SettingsActivity : AppCompatActivity() {
    private lateinit var usernameTextView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_settings)
        
        usernameTextView = findViewById(R.id.username_text_view)
        
        FirebaseAuth.getInstance().currentUser?.let { user ->
            FirebaseFirestore.getInstance()
                .collection("users")
                .document(user.uid)
                .get()
                .addOnSuccessListener { document ->
                    if (document.exists()) {
                        val username = document.getString("username")
                        usernameTextView.text = username
                    }
                }
                .addOnFailureListener { it.printStackTrace() }
        }
    }
}

常见排查点 #

• 确认Firebase SDK已正确初始化，项目配置文件无误
• 检查Firestore安全规则，确保当前登录用户有权限读取自己的文档（示例规则：match /users/{userId} { allow read: if request.auth != null && request.auth.uid == userId; }）
• 核实users集合内的目标文档确实包含username字段，且文档ID与用户UID完全匹配

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