Firestore setDoc报错：参数类型非法，无法写入用户Auth关联数据

我同时使用Firebase Auth和Firestore存储用户信息，希望将用户信息存储在与Auth自动生成的uid同名的文档中，但调用setDoc写入时触发报错：

FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

目前所有变量（uid、email、username）的日志输出均符合预期，但setDoc函数执行失败触发catch分支，未执行页面跳转；数据库仅记录读取操作，无写入记录且未生成新文档。

相关代码 #

firebase.js 初始化文件 #

import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"
import { getFirestore } from "firebase/firestore"

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
}

const app = initializeApp(firebaseConfig)

export const auth = getAuth(app);
export default app;
export const db = getFirestore(app);

FinishSignup 用户信息提交组件 #

import React, { useState} from "react";
import db from "../firebase"
import { doc, setDoc } from "firebase/firestore"
import {Form, Button, Card, Alert, Container} from 'react-bootstrap';
import { useAuth } from '../contexts/AuthContext';
import { useNavigate } from "react-router-dom";
import Header from "../components/Header"
import Footer from "../components/Footer"

export default function FinishSignup() {
    const { currentUser } = useAuth()
    const [error, setError] = useState('')
    const [username, setUsername] = useState("")
    const navigate = useNavigate("/")
    const [loading, setLoading] = useState(false)

    async function handleSubmit(e) {
        e.preventDefault()
        const uid = currentUser.uid
        const email = currentUser.email

        try {
            setLoading(true)
            setError("")
            console.log(uid)
            console.log(email)
            console.log(username)
            await setDoc(doc(db, "users", uid), {
                username: username, 
                email: email
            })
            navigate("/")
        } catch (error){
            console.error("Error adding document: ", error)
            setError("Failed to complete signup")
        }

        setLoading(false)
    }

    return (
        <div style={{ backgroundColor: "#0b1321ff" }}>
            <Header />
            <Container className="d-flex align-items-center justify-content-center"
                style={{ minHeight: "100vh", backgroundColor: "#0b1321ff", color: '#b7c1d3ff' }}
            >
                <div className="w-100" style={{ maxWidth: '400px' }}>
                    <Card style={{ backgroundColor: "#0b1321ff", color: '#b7c1d3ff', border: '3px ridge #b7c1d3ff' }}>
                        <Card.Body>
                            <h2 className="text-center mb-4">Finish Setting Up Your Account</h2>
                            {error && <Alert variant="danger">{error}</Alert>}
                            <Form onSubmit={handleSubmit}>
                                <Form.Group id="username">
                                    <Form.Label>Username</Form.Label>
                                    <Form.Control type="text" onChange={(e) => {setUsername(e.target.value)}} />
                                </Form.Group>
                                <Button disabled={loading} className="w-100 text-center mt-2" type="submit"
                                    style={{backgroundColor: '#0b1321ff', color: '#67a170ff', border: '2px ridge #67a170ff'}}>Finish Signup</Button>
                            </Form>
                        </Card.Body>
                    </Card>
                </div>
            </Container>
            <Footer />
        </div>
    )
}

错误原因与解决方案 #

核心错误 #

Firestore数据库实例的导入方式错误：在firebase.js中，db是命名导出（export const db），但组件中使用了默认导入（import db from "../firebase"），实际导入的是Firebase应用实例app，而非Firestore数据库实例。将app传入doc()方法会触发类型不匹配错误。

修复步骤 #

1. 修正db的导入语句
   将组件中的默认导入改为命名导入：

// 原错误代码
import db from "../firebase"

// 修改为
import { db } from "../firebase"

2. 修正useNavigate的使用
   useNavigate不需要传入初始路径参数，正确写法为：

// 原错误代码
const navigate = useNavigate("/")

// 修改为
const navigate = useNavigate()

修复后的关键代码片段 #

import React, { useState} from "react";
import { db } from "../firebase" // 修正导入
import { doc, setDoc } from "firebase/firestore"
// ... 其他导入

export default function FinishSignup() {
    const { currentUser } = useAuth()
    const [error, setError] = useState('')
    const [username, setUsername] = useState("")
    const navigate = useNavigate() // 修正useNavigate调用
    const [loading, setLoading] = useState(false)

    async function handleSubmit(e) {
        e.preventDefault()
        const uid = currentUser.uid
        const email = currentUser.email

        try {
            setLoading(true)
            setError("")
            await setDoc(doc(db, "users", uid), {
                username: username, 
                email: email
            })
            navigate("/")
        } catch (error){
            console.error("Error adding document: ", error)
            setError("Failed to complete signup")
        }

        setLoading(false)
    }

    // ... 其余组件代码不变
}

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