Firebase导入问题及注册报错：createUserWithEmailAndPassword非函数

问题代码 #

firebase.js #

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: 'AIzaSyCUndICAUxUT3n_Q19F05BazSpLOkr2d1c',
    authDomain: 'chat-e7246.firebaseapp.com',
    projectId: 'chat-e7246',
    storageBucket: 'chat-e7246.appspot.com',
    messagingSenderId: '28357679434',
    appId: '1:28357679434:web:58376c850f47e39fb689b3',
    measurementId: 'G-VE6BZN6595',
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth();
export const storage = getStorage();
export const db = getFirestore();

user.jsx #

import { auth, db } from '~/firebase';
const onSubmit = (data) => {
        setFormData({
            email: data.email,
            fullname: data.fullname,
            username: data.username,
            password: data.password,
            confirmPassword: data.confirmPassword,
        });
    };

    const registerUser = async () => {
        try {
            const { user } = await auth.createUserWithEmailAndPassword(formData.email, formData.password);
            await db.collection('users').doc(user.uid).set(formData);

            return user;
        } catch (error) {
            console.error('Error registering user:', error);
            throw error;
        }
    };

报错原因 #

你使用的是Firebase v9及以上的模块化API，但代码仍沿用旧版命名空间API的写法：

• auth.createUserWithEmailAndPassword 是旧版写法，模块化API中该方法需单独导入，不能直接从auth实例调用
• db.collection('users').doc(user.uid).set(formData) 同样是旧版写法，模块化API需使用collection、doc、setDoc这些独立函数

修复方案 #

修改user.jsx代码，导入对应的Firebase函数并使用模块化写法：

// 新增导入需要的函数
import { auth, db } from '~/firebase';
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { collection, doc, setDoc } from 'firebase/firestore';

const onSubmit = (data) => {
        setFormData({
            email: data.email,
            fullname: data.fullname,
            username: data.username,
            password: data.password,
            confirmPassword: data.confirmPassword,
        });
    };

    const registerUser = async () => {
        try {
            // 使用模块化的createUserWithEmailAndPassword
            const { user } = await createUserWithEmailAndPassword(auth, formData.email, formData.password);
            // 使用模块化的collection、doc、setDoc
            const userDocRef = doc(collection(db, 'users'), user.uid);
            await setDoc(userDocRef, formData);

            return user;
        } catch (error) {
            console.error('Error registering user:', error);
            throw error;
        }
    };

额外说明 #

Firebase v9+的模块化API通过按需导入函数减小打包体积，所有操作均需使用对应独立函数，而非直接从实例调用方法。若习惯旧版写法，也可使用compat兼容包，但官方推荐使用模块化写法。

内容的提问来源于stack exchange，提问作者Quang Phú Nguyễn Hoàng