Firestore、Angular、AngularFire2：如何添加含引用类型字段的文档

Absolutely! You can definitely add documents containing reference-type fields to a Firestore collection when working with Angular and AngularFire2 (now commonly referred to as AngularFire in newer versions). Firestore references are just pointers to other documents, so the process boils down to creating that reference first, then including it as a field in your new document.

Here's a step-by-step guide with concrete code examples to make this clear:

Step 1: Ensure AngularFire is configured #

First, confirm you’ve set up AngularFire in your Angular project (installed required packages, added Firebase config to your environment files, etc.).

Step 2: Create a reference to the target document #

To add a reference field, you first need to get a reference to the existing document you want to link to. For example, if you have a users collection and want to reference a specific user document:

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-add-document',
  templateUrl: './add-document.component.html'
})
export class AddDocumentComponent {
  constructor(private afs: AngularFirestore) {}

  addDocumentWithReference() {
    // Get a reference to a user document in the 'users' collection
    const targetUserRef = this.afs.doc('users/user_123').ref;

Step 3: Build your document data with the reference #

Construct the data object for your new document, including the reference as a field value. Let’s say we’re adding a posts document where the author field points to the user reference we just created:

// Build the post data with the reference field
    const newPostData = {
      title: 'My First Firestore Post',
      content: 'This post links to a user via a reference field',
      author: targetUserRef, // This is the reference-type field
      createdAt: new Date()
    };

Step 4: Add the document to your collection #

Use AngularFire’s add() method to push the document to your target collection:

// Add the document to the 'posts' collection
    this.afs.collection('posts').add(newPostData)
      .then(docRef => {
        console.log('Post added successfully! Document ID:', docRef.id);
      })
      .catch(error => {
        console.error('Error adding post:', error);
      });
  }
}

Bonus: Retrieving the referenced document data #

When you later fetch the post document, you can resolve the reference to get the linked user’s data. Here’s a quick example of how to do that:

getPostsWithAuthorData() {
  this.afs.collection('posts').snapshotChanges().pipe(
    map(actions => actions.map(a => {
      const postData = a.payload.doc.data() as any;
      const postId = a.payload.doc.id;
      // Resolve the author reference to fetch the user's data
      return postData.author.get().then(userDoc => ({
        id: postId,
        ...postData,
        authorDetails: userDoc.data()
      }));
    }))
  ).subscribe(postPromises => {
    Promise.all(postPromises).then(postsWithAuthor => {
      console.log('Posts with full author details:', postsWithAuthor);
    });
  });
}

A quick note: If you’re using a newer version of AngularFire (instead of the older AngularFire2), import paths might differ slightly (e.g., using @angular/fire/compat/firestore for compatibility), but the core logic of working with references remains exactly the same.

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