React Native & Firestore：属性'auth'在类型'类型/错误对象未知中不存在

Question

我正在使用typescript以及Firebase和React Native。

我正在我的注册界面工作，我导入firebase如下:

import * as firebase from 'firebase/app';
import 'firebase/auth';

对于onSignUp函数，我得到了这个

onSignUp = async () => {
if (this.state.email && this.state.password) {
try {
const response = await firebase
.auth()
.createUserWithEmailAndPassword(this.state.email, this.state.password);
} catch (error) {
if (error.code == 'auth/email-already-in-use') {
Alert.alert('Signup Error', 'User already exist!', [
{
text: 'Ok',
},
]);
}
}
}
};

Visual Studio Code正在抱怨await firebase.auth()上的auth，它显示为Property 'auth' does not exist on type 'typeof。

另外，它也在抱怨error.code，它说Object is of type 'unknown'.ts(2571)不确定它是什么意思，并且被卡住了一段时间。

这是我的完整代码:

export interface Props {}
interface State {
email: string;
password: any;
isLoading: boolean;
}
export default class LoginScreen extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
email: '',
password: '',
isLoading: false,
};
}
onLogin = () => {};
onSignUp = async () => {
if (this.state.email && this.state.password) {
try {
const response = await firebase
.auth()
.createUserWithEmailAndPassword(
this.state.email,
this.state.password
);
} catch (error) {
if (error.code == 'auth/email-already-in-use') {
Alert.alert('Signup Error', 'User already exist!', [
{
text: 'Ok',
},
]);
}
}
}
};
render() {
return (
<View style={styles.container}>
<TextInput
placeholder="Your Email"
keyboardType="email-address"
autoCorrect={false}
style={styles.txtInput}
onChangeText={(email) => this.setState(email)}
/>
<TextInput
placeholder="Your Password"
secureTextEntry
style={styles.txtInput}
onChangeText={(password) => this.setState(password)}
/>
<TouchableOpacity style={styles.btnLog} onPress={this.onLogin}>
<Text style={styles.logTxt}>Login</Text>
</TouchableOpacity>
</View>
);
}
}

知道是什么导致了firebase.auth()和error.code吗?请帮助。

:我尝试使用async await遵循v9指南，但仍然不起作用:

import {initializeApp} from 'firebase/app';
import {firebaseConfig} from '../config/config';
import {getAuth, createUserWithEmailAndPassword} from 'firebase/auth';
export interface Props {}
interface State {
email: string;
password: any;
isLoading: boolean;
}
export default class LoginScreen extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
email: '',
password: '',
isLoading: false,
};
this.initialFirebase();
}
initialFirebase = () => {
initializeApp(firebaseConfig);
};
auth = getAuth(this.initialFirebase);
onLogin = () => {};
onSignUp = async () => {
if (this.state.email && this.state.password) {
try {
const response = await createUserWithEmailAndPassword(
auth,
this.state.email,
this.state.password,
);
} catch (error) {
if (error.code == 'auth/email-already-in-use') {
Alert.alert('Signup Error', 'User already exist!', [
{
text: 'Ok',
},
]);
}
}
}
};

Answer 1

您可能有使用新语法的new Modular SDK V9。如果想使用现有的语法(v8)，那么将导入更改为compat版本:

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
// import 'firebase/compat/[SERVICE]'

我建议升级到新的SDK，因为它有一定的性能优势。您可以尝试使用以下语法:

import { initializeApp } from "firebase/app"
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"
const app = initializeApp({...config})
const auth = getAuth(app)

// in onSignUp
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in 
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});

您可以参考文档以了解更多关于新SDK的信息。