使用Firebase 9 Firestore自定义ID添加用户时遇TypeError: doc is not a function

问题描述 #

我尝试在Firestore中使用自定义ID添加用户，相关代码如下：

import { db } from "../firebase/config";
import {collection, addDoc, deleteDoc, updateDoc, doc, setDoc} from 'firebase/firestore'
 
export const useFirestore = (collections) => {

    const addDocumentUser = async (doc, id) => {
        try{
            const addedDocument = await setDoc(doc(db, collections, id), {...doc});
            return addedDocument.id
            
        }
        catch(err){
            console.log(err)
            dispatch({type: 'ERROR', payload: err})
        }
    }
    

    return {addDocumentUser}
}

运行后控制台出现如下错误：

TypeError: doc is not a function
    at addDocumentUser (useFirestore.js:62:1)
    at useSignup.js:29:1
    at async signup (useSignup.js:23:1)
    at async handleSubmit (Signup.js:23:1)

我已导入所有所需内容，且使用不带自定义ID的addDoc函数时数据库访问正常，请问我哪里操作出错了？

解决方案 #

问题出在命名冲突上：你导入的Firestore的doc函数，和addDocumentUser函数的第一个参数doc重名了。在函数内部调用doc(db, collections, id)时，实际引用的是传入的参数doc（它是一个对象，不是函数），所以才会抛出“doc is not a function”的错误。

只需要修改参数名称，避免和导入的Firestore函数重名即可，比如把参数doc改成userDoc：

import { db } from "../firebase/config";
import {collection, addDoc, deleteDoc, updateDoc, doc, setDoc} from 'firebase/firestore'
 
export const useFirestore = (collections) => {

    const addDocumentUser = async (userDoc, id) => {
        try{
            await setDoc(doc(db, collections, id), {...userDoc});
            return id // 直接返回自定义ID即可，setDoc不返回带id的对象
            
        }
        catch(err){
            console.log(err)
            dispatch({type: 'ERROR', payload: err})
        }
    }
    

    return {addDocumentUser}
}

另外补充：setDoc方法返回的是Promise<void>，不会携带文档ID，所以你可以直接返回传入的自定义id，无需尝试从addedDocument中获取。

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