React Native集成Firebase发验证邮件遇app/no-options错误求解决

错误原因 #

1. Auth初始化方式错误：在firebase.js中直接将firebaseConfig传入getAuth()，但getAuth()需要接收已初始化的Firebase App实例，而非原始配置对象。
2. 组件未使用正确的Auth实例：组件中调用getAuth()时，Firebase无法找到已初始化的App实例，因此抛出“需要配置项”的错误。
3. API混用问题：代码同时使用了Firebase v9模块化API和compat兼容层，导致初始化逻辑混乱。

解决方法 #

1. 修复firebase.js的初始化代码 #

先初始化Firebase App，再用App实例创建Auth对象，并导出Auth供组件使用：

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

// Firebase配置
const firebaseConfig = {
  apiKey: '你的api key',
  authDomain: 'freshlyy-437ac.firebaseapp.com',
  projectId: 'freshlyy-437ac',
  storageBucket: 'freshlyy-437ac.appspot.com',
  messagingSenderId: '940915596506',
  appId: '你的app Id',
};

// 初始化Firebase App
const app = initializeApp(firebaseConfig);
// 基于App实例创建Auth对象
const auth = getAuth(app);
// 初始化Storage
export const FreshlyyImageStore = getStorage(app);

// 导出Auth供组件调用
export { auth };

2. 修复组件代码中的核心问题 #

导入修正

替换原有导入，使用导出的Auth实例和正确的API：

import { useState } from 'react';
import { SafeAreaView, View, ScrollView, Image, Alert, Linking } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { sendSignInLinkToEmail, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";
import { auth } from '../util/firebase'; // 导入正确的Auth实例
import { useFormik } from 'formik';
import * as Yup from 'yup';
// 导入你的自定义组件Header、TextInputBox、Button

修正actionCodeSettings

url不能直接传navigation.navigate，需设置为Firebase动态链接（需在控制台配置授权域名）：

const actionCodeSettings = {
  url: 'https://freshlyy-437ac.page.link/verify-email', // 替换为你的动态链接
  handleCodeInApp: true,
  iOS: {
    bundleId: '你的iOS包名'
  },
  android: {
    packageName: '你的Android包名',
    installApp: true,
    minimumVersion: '12'
  },
  dynamicLinkDomain: 'freshlyy-437ac.page.link' // 替换为你的动态链接域名
};

修正邮件发送逻辑

替换window.localStorage为React Native的AsyncStorage，并处理异步逻辑：

const handleEmailAuth = async () => {
  try {
    await sendSignInLinkToEmail(auth, formik.values.email, actionCodeSettings);
    await AsyncStorage.setItem('emailForSignIn', formik.values.email);
    Alert.alert('邮件已发送', '请检查邮箱点击验证链接');
  } catch (error) {
    Alert.alert('发送失败', error.message);
  }
};

修正邮箱验证逻辑

使用Linking API获取跳转链接，处理AsyncStorage的异步读取：

const handleVerifyEmail = async () => {
  try {
    const emailForSignIn = await AsyncStorage.getItem('emailForSignIn');
    if (!emailForSignIn) {
      Alert.alert('错误', '未找到验证邮箱，请重新发起验证');
      return;
    }
    const url = await Linking.getInitialURL();
    
    if (isSignInWithEmailLink(auth, url)) {
      await signInWithEmailLink(auth, emailForSignIn, url);
      await AsyncStorage.removeItem('emailForSignIn');
      Alert.alert('验证成功', '你的邮箱已验证通过');
      navigation.navigate('NextScreen');
    }
  } catch (error) {
    Alert.alert('验证失败', error.message);
  }
};

修正表单提交逻辑

去掉依赖异步状态的判断，直接调用验证方法：

async function submit() {
  await formik.validateForm();
  Object.keys(formik.values).forEach((key) => {
    formik.setFieldTouched(key);
  });
  if (Object.keys(formik.errors).length > 0) return;
  await handleEmailAuth();
}

额外注意事项 #

• 在Firebase控制台的「Authentication」-「Sign-in method」中，启用「Email/Password」和「Email link (passwordless sign-in)」
• 确保动态链接域名和应用域名已添加到Firebase控制台「项目设置」-「授权域名」列表中
• React Native需配置Linking：iOS在Info.plist添加URL Schemes，Android在AndroidManifest.xml添加intent-filter

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