Angular 5 Firebase创建含邮箱密码及额外字段（如姓名）的用户方法

Got it, let's work through this to get your user setup with the name field and map Firebase's uid to your id property properly.

First: Fix Your UserInterface Definition #

TypeScript interfaces can't include constructor logic — that's reserved for classes. Let's adjust your interface to just define the shape of the user data:

export interface UserInterface {
  id?: string;
  name: string;
  email: string;
  password: string;
  status: string;
}

Option 1: Save Full User Data to Firebase Firestore (Recommended) #

Firebase's createUserWithEmailAndPassword only creates the core auth user (email + password). To store additional fields like name and map uid to id, you'll need to save the full user object to Firestore (or Realtime Database) after auth creation.

Here's how to update your service:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { UserInterface } from './path-to-your-interface';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(
    private angularFireAuth: AngularFireAuth,
    private firestore: AngularFirestore // Inject Firestore to store user data
  ) {}

  createUser(user: UserInterface) {
    return this.angularFireAuth.auth.createUserWithEmailAndPassword(user.email, user.password)
      .then((userCredential) => {
        // Grab the auto-generated uid from Firebase Auth
        const uid = userCredential.user?.uid;
        if (!uid) throw new Error('Failed to retrieve user UID');

        // Build the complete user object with uid mapped to id
        const completeUser: UserInterface = {
          ...user,
          id: uid,
          status: user.status || 'active' // Set a default if status isn't provided
        };

        // Save the full user data to Firestore's "users" collection
        return this.firestore.collection('users').doc(uid).set(completeUser);
      })
      .then(() => {
        // Optional: Return the complete user object if needed by the caller
        return completeUser;
      })
      .catch((error) => {
        // Pass errors up to handle in your component
        throw error;
      });
  }
}

Option 2: Just Return the Mapped User Object (No Database Save) #

If you don't need to persist the name field to a database right now, you can just map the uid to id and return the full user object:

createUser(user: UserInterface) {
  return this.angularFireAuth.auth.createUserWithEmailAndPassword(user.email, user.password)
    .then((userCredential) => {
      const uid = userCredential.user?.uid;
      if (!uid) throw new Error('Failed to retrieve user UID');

      // Return the user object with uid mapped to id
      return {
        ...user,
        id: uid,
        status: user.status || 'active'
      } as UserInterface;
    });
}

Bonus: Use a Class for Constructor Logic #

If you prefer using a class to handle the uid → id mapping automatically, you can create a User class that implements your interface:

export class User implements UserInterface {
  id?: string;
  name: string;
  email: string;
  password: string;
  status: string;

  constructor(authData: { uid?: string }, userData: Omit<UserInterface, 'id'>) {
    this.id = authData.uid;
    this.name = userData.name;
    this.email = userData.email;
    this.password = userData.password;
    this.status = userData.status;
  }
}

Then update your service to return a User instance:

createUser(userData: Omit<UserInterface, 'id'>) {
  return this.angularFireAuth.auth.createUserWithEmailAndPassword(userData.email, userData.password)
    .then((userCredential) => {
      return new User(userCredential.user, userData);
    });
}

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