如何创建API在React中更新Firestore用户数据及预填字段问题

问题分析 #

1. 表单无法预填Firestore字段：当前组件仅从Auth获取了email，未从Firestore拉取university和sem的已有数据；且useAuthState是异步的，初始渲染时user为null，导致初始state的email可能为空。
2. 用户信息更新潜在问题：云函数的update操作会直接覆盖传入字段，若前端传空字符串（比如用户未修改university），会清空Firestore里的对应字段；另外需确认CORS配置是否允许PUT请求。

解决方案 #

1. 修改React组件实现表单预填 #

添加useEffect钩子，在用户登录状态稳定后从Firestore获取完整数据并更新state，同时处理加载状态：

import React, { useState, useEffect } from 'react'
import { useAuthState, db } from './firebase'
import axios from 'axios'

export const Update = () => {
    const { user } = useAuthState()
    const [details, setDetails] = useState({
        email: '',
        university: '',
        sem: ''
    })
    const [loading, setLoading] = useState(true)

    // 从Firestore拉取用户数据填充表单
    useEffect(() => {
        if (!user) {
            setLoading(false)
            return
        }
        db.collection('users').doc(user.uid).get()
            .then(doc => {
                if (doc.exists) {
                    const userData = doc.data()
                    setDetails({
                        email: user.email || '',
                        university: userData.university || '',
                        sem: userData.sem || ''
                    })
                }
            })
            .catch(err => console.error('获取用户数据失败:', err))
            .finally(() => setLoading(false))
    }, [user])

    const handleUpdate = (e) => {
        e.preventDefault();
        if (!user) return;
        
        axios.put(`http://localhost:5001/klevr-cdcf3/us-central1/updateUser`, {
            ...details, 
            uid: user.uid
        })
        .then(response => console.log('更新成功:', response))
        .catch(error => console.error('更新失败:', error));
    };

    if (loading) {
        return <div>加载中...</div>
    }

    if (!user) {
        return <div>请先登录</div>
    }

    return (
        <div>
            <h1>Update</h1>
            <form onSubmit={handleUpdate}>
                Email <input 
                    type='email' 
                    value={details.email} 
                    placeholder='enter email address' 
                    onChange={(e) => setDetails({...details, email: e.target.value})} 
                /><br /><br />
                University <input 
                    type='text' 
                    value={details.university} 
                    placeholder='enter your university' 
                    onChange={(e) => setDetails({...details, university: e.target.value})} 
                /><br /><br />
                Semester <input 
                    type='text' 
                    value={details.sem} 
                    placeholder='enter the semester' 
                    onChange={(e) => setDetails({...details, sem: e.target.value})} 
                /><br /><br />
                <button type='submit'>Update</button>
            </form>
        </div>
    )
}

2. 优化云函数避免字段清空问题 #

修改云函数，仅更新传入的非空字段，同时完善错误处理和CORS配置：

import * as functions from "firebase-functions";
import * as admin from "firebase-admin";
import * as cors from "cors";

// 生产环境建议替换为指定前端域名，限制跨域来源
const corsHandler = cors({ origin: true });

export const updateUser = functions.https.onRequest((req, res) => {
  corsHandler(req, res, async () => {
    try {
      const { uid, email, university, sem } = req.body;
      
      if (!uid) {
        return res.status(400).send('缺少用户UID');
      }

      // 仅更新非空的Auth字段
      const authUpdateData: any = {};
      if (email) authUpdateData.email = email;
      if (Object.keys(authUpdateData).length > 0) {
        await admin.auth().updateUser(uid, authUpdateData);
      }

      // 仅更新非空的Firestore字段
      const firestoreUpdateData: any = {};
      if (email) firestoreUpdateData.email = email;
      if (university) firestoreUpdateData.university = university;
      if (sem) firestoreUpdateData.sem = sem;
      
      if (Object.keys(firestoreUpdateData).length > 0) {
        await admin.firestore().collection('users').doc(uid).update(firestoreUpdateData);
      }

      res.status(200).send('用户信息更新成功');
    } catch (error) {
      console.error('更新用户失败:', error);
      res.status(500).send('更新用户信息失败');
    }
  });
});

额外注意事项 #

• 配置Firestore安全规则，确保用户仅能更新自己的文档：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /users/{userId} {
        allow update: if request.auth.uid == userId;
      }
    }
  }
  

• 若无需云函数处理特殊业务逻辑，可直接在前端调用Firebase Auth和Firestore API，减少额外请求开销。

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