在Firebase React应用中存储子文件夹父ID的语法正确性问询

我正在开发React应用，需要实现文件夹内创建子文件夹的功能，为此要在Firestore中存储主文件夹的parentID。以下是我的AddFolderButton组件代码及firebase.js配置代码，但不确定使用.id获取父文件夹ID的语法是否正确，曾在Stack Overflow看到其他写法。

AddFolderButton组件代码 #

// AddFolderButton组件实现
import React, { useState } from "react";
import { Button, Modal, Form } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFolderPlus } from "@fortawesome/free-solid-svg-icons";
import { database, db } from "../../firebase";
import { useAuth } from "../../contexts/AuthContext";
import {
   getFirestore,
   collection,
   getDocs,
   addDoc,
   serverTimestamp,
} from "firebase/firestore";

export default function AddFolderButton({ currentFolder }) {
   const [open, setOpen] = useState(false);
   const [name, setName] = useState("");
   const { currentUser } = useAuth();

   function openModal() {
       setOpen(true);
   }

   function closeModal() {
       setOpen(false);
   }

   function handleSubmit(e) {
       e.preventDefault();

       try {
           if (currentFolder == null) return;
           const parentId = currentFolder?.id || null;

           console.log("Database folders:", database.folders);
           const folderRef = addDoc((database.folders), {
               name: name,
               parentId,
               userId: currentUser.uid,
               
               createdAt: serverTimestamp()
           });

           console.log(folderRef.id);
           setName("");
           closeModal();
       } catch (error) {
           console.error("Error adding folder to Firestore:", error.message);
           closeModal();
       }
   }

   return (
       <>
           <Button onClick={openModal} variant="outline-success" size="sm">
               <FontAwesomeIcon icon={faFolderPlus} />
           </Button>
           <Modal show={open} onHide={closeModal}>
               <Form onSubmit={handleSubmit}>
                   <Modal.Body>
                       <Form.Group>
                           <Form.Label>Folder Name</Form.Label>
                           <Form.Control
                               type="text"
                               required
                               value={name}
                               onChange={(e) => setName(e.target.value)}
                           />
                       </Form.Group>
                   </Modal.Body>
                   <Modal.Footer>
                       <Button variant="secondary" onClick={closeModal}>
                           Close
                       </Button>
                       <Button variant="success" type="submit">
                           Add Folder
                       </Button>
                   </Modal.Footer>
               </Form>
           </Modal>
       </>
   );
}

firebase.js配置代码 #

import firebase from "firebase/compat/app"
import "firebase/compat/auth"
import { getFirestore, collection, addDoc, serverTimestamp } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const app = firebase.initializeApp({
   // 配置信息
})

export const db = getFirestore(app);

export const database = {
  folders: collection(db, 'folders'),
  files: collection(db, 'files'),
  formatDoc: (doc) => ({ id: doc.id, ...doc.data() }),
  getCurrentTimestamp: serverTimestamp(),
};

export const storage = getStorage(app);
export const auth = app.auth()
export default app

解答 #

父文件夹ID获取语法的正确性 #

你的currentFolder?.id写法完全正确。从firebase配置里的formatDoc函数可以看到，它会把Firestore的文档快照转换为包含id字段的普通对象——只要currentFolder是经过这个函数处理后的结果，用.id获取ID就是标准且正确的方式。

代码中的潜在问题修正 #

1. 异步函数处理错误
   addDoc是异步函数，直接console.log(folderRef.id)会报错，因为此时folderRef是Promise对象而非文档引用。需要把handleSubmit改为异步函数：

async function handleSubmit(e) {
    e.preventDefault();

    try {
        if (currentFolder == null) {
            alert("请先选择一个父文件夹");
            closeModal();
            return;
        }
        const parentId = currentFolder?.id || null;

        const docRef = await addDoc(database.folders, {
            name: name,
            parentId,
            userId: currentUser.uid,
            createdAt: serverTimestamp()
        });

        console.log(docRef.id); // 此处可正确获取新建文档ID
        setName("");
        closeModal();
    } catch (error) {
        console.error("Error adding folder to Firestore:", error.message);
        closeModal();
    }
}

2. 清理冗余导入
   组件中导入的getFirestore、collection等方法已在firebase.js中处理，可直接移除这些冗余导入：

// 移除以下冗余代码
import {
   getFirestore,
   collection,
   getDocs,
   addDoc,
   serverTimestamp,
} from "firebase/firestore";

3. 空状态用户反馈
   原代码中currentFolder == null时直接return，无任何提示，添加弹窗提示可提升用户体验（已在上面的修正代码中体现）。

其他写法说明 #

你在Stack Overflow看到的其他写法，通常是直接从原始Firestore文档快照获取ID的方式（如docSnapshot.id）。而你的formatDoc函数已经将快照转换为包含id的普通对象，两种方式本质等价，但你的写法更符合React项目中处理数据的常规方式。

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