React Native调用Firebase注册接口触发TypeError致应用崩溃

• 模块导入路径不匹配：你使用了firebase/compat/app的v9兼容层导入核心库，但Auth模块用的是不匹配的非兼容路径require('firebase/auth')，两个模块版本层不一致，无法正常挂载auth方法。
• 缺失Firebase初始化逻辑：所有Firebase服务都必须先传入项目配置调用initializeApp完成初始化才能使用，未初始化时直接调用firebase.auth()会拿到undefined值，后续尝试调用undefined.createUserWithEmailAndPassword()就会触发TypeError，直接导致应用崩溃。

按以下步骤调整代码即可解决问题：

1. 统一Firebase兼容层导入路径，替换原有错误的导入语句：

import React, { Component } from 'react'
import { View, Button, TextInput } from 'react-native'
// 统一使用compat路径导入Firebase模块
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

2. 在组件定义前添加Firebase初始化逻辑，注意加判断避免热重载时重复初始化报错，配置值从你自己的Firebase项目控制台获取：

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  projectId: "你的项目projectId",
  storageBucket: "你的项目storageBucket",
  messagingSenderId: "你的项目messagingSenderId",
  appId: "你的项目appId"
};

// 未初始化时才执行初始化，避免重复初始化报错
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

// 后续再写Register组件的定义
export class Register extends Component {
  // 你原有的组件逻辑
}

3. （可选优化）给注册方法加基础的非空校验，避免空值传入触发额外报错，同时可以在注册成功后把输入的用户名更新到用户资料里：

onSignUp() {
    const { email, password, name } = this.state;
    // 基础空值校验
    if (!email.trim() || !password.trim() || !name.trim()) {
      console.log("姓名、邮箱、密码均不能为空");
      return;
    }
    firebase.auth().createUserWithEmailAndPassword(email.trim(), password.trim())
    .then((userCredential) => {
        // 注册成功后更新用户显示名
        return userCredential.user.updateProfile({
          displayName: name.trim()
        })
    })
    .then(() => {
      console.log("账号注册完成");
    })
    .catch((error) => {
        console.log("注册失败：", error.message);
    })
}

注意：firebase/compat是Firebase v9为了兼容旧版v8写法提供的过渡层，如果你后续要升级到新版模块化树摇写法，可以不用compat路径，直接按需导入getAuth、createUserWithEmailAndPassword等方法即可，当前修复后兼容层写法可以正常运行，不会再触发本次的TypeError崩溃。

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