Angular+Ionic+Firebase注册报错：找不到email和password变量

问题根源 #

注册时触发TS2304错误，是因为组件类里没定义email、password变量，也没把HTML输入框的值和组件变量做绑定，导致调用Firebase注册方法时找不到这两个参数。

修复步骤 #

1. 在组件类中定义绑定变量

修改signup.page.ts，添加用于接收输入值的类属性，并优化Firebase Auth实例的导入方式：

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
// 从环境文件导入已初始化的auth实例，避免重复初始化
import { auth } from '../../environments/environment';
import { createUserWithEmailAndPassword } from "firebase/auth";

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {
  // 定义绑定变量，初始化为空字符串
  name: string = '';
  email: string = '';
  password: string = '';

  constructor(private navCtrl: NavController) { }

  gotologin() {
    this.navCtrl.navigateForward('login');
  }

  SignUp() {
    // 使用this.xxx获取输入框绑定的变量值
    createUserWithEmailAndPassword(auth, this.email, this.password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log('注册成功:', user);
        // 注册成功后可跳转至首页或登录页
        this.navCtrl.navigateForward('/');
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.error('注册失败:', errorCode, errorMessage);
      });
  }

  ngOnInit() {
  }
}

2. 在HTML模板中添加双向数据绑定

修改signup.page.html，给输入框加上[(ngModel)]指令，实现输入值和组件变量的双向绑定：

<ion-header>
  <ion-toolbar>
    <ion-title>Sign Up</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="wrapper">
  <ion-item lines="none">
    <ion-label position="floating">Name</ion-label>
    <ion-input type="text" placeholder="Firstname Lastname" [(ngModel)]="name"></ion-input>
  </ion-item>
  <ion-item lines="none">
    <ion-label position="floating">Email</ion-label>
    <ion-input type="email" placeholder="Email" [(ngModel)]="email"></ion-input>
  </ion-item>
  <ion-item lines="none">
    <ion-label position="floating">Password</ion-label>
    <ion-input type="password" placeholder="password" [(ngModel)]="password"></ion-input>
  </ion-item>
  <!-- 修正按钮文字：Sign Up 而非 Sign In -->
  <ion-button (click)="SignUp()" expand="block" class="mt-4">Sign Up</ion-button>
</ion-content>

<ion-footer>
  <div class="text" (click)="gotologin()">
    Already a Member? Sign In
  </div>
</ion-footer>

3. 优化环境文件的Auth实例导出

修改environment.ts，把初始化后的auth实例导出，避免在组件中重复初始化：

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";

export const environment = {
  production: false
};

const firebaseConfig = {
  apiKey: "SUS",
  authDomain: "SUS",
  projectId: "SUS",
  storageBucket: "Sus",
  messagingSenderId: "Sus",
  appId: "Sus",
  measurementId: "Sus"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

// 导出Auth实例供组件使用
export const auth = getAuth(app);

4. 额外注意事项

• 确保在模块中导入FormsModule（app.module.ts或signup.module.ts），因为[(ngModel)]依赖这个模块：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      FormsModule,
      // 其他导入项
    ]
  })
  

• 邮箱输入框用type="email"可自带格式校验，密码输入框用type="password"避免明文显示。

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