Subcollections in Firebase - Mini Project: Build & Apply

Firebase Subcollections Setup

📖 Scenario: You are building a simple app to store information about books and their reviews. Each book can have multiple reviews stored inside it as a subcollection.

🎯 Goal: Create a Firestore database structure with a books collection. Inside each book document, create a reviews subcollection to hold review documents.

📋 What You'll Learn

Create a books collection with one book document having ID book1 and a field title with value 'Learn Firebase'.

Create a variable reviewCount set to 0 to track the number of reviews.

Add a review document inside the reviews subcollection of book1 with ID review1 and fields user: 'Alice' and comment: 'Great book!'.

Update the reviewCount field in the book1 document to 1.

💡 Why This Matters

🌍 Real World

Storing related data in subcollections is common in apps like book reviews, social media comments, or orders with items.

💼 Career

Understanding Firestore subcollections is essential for building scalable and organized NoSQL databases in many cloud applications.

1

Create the books collection with one book document

Create a Firestore collection called books. Add a document with ID book1 and a field title set to 'Learn Firebase'.

Firebase

// Initialize Firestore and create the books collection with book1 document
// Your code here

Hint

Use setDoc with doc(db, 'books', 'book1') to create the document.

2

Create a review count variable

Create a variable called reviewCount and set it to 0 to track the number of reviews.

Firebase

import { getFirestore, doc, setDoc } from 'firebase/firestore';

const db = getFirestore();

await setDoc(doc(db, 'books', 'book1'), { title: 'Learn Firebase' });

// Create reviewCount variable
// Your code here

Hint

Use let reviewCount = 0; to create the variable.

3

Add a review document inside the reviews subcollection

Add a document with ID review1 inside the reviews subcollection of the book1 document. The review document should have fields user set to 'Alice' and comment set to 'Great book!'.

Firebase

import { getFirestore, doc, setDoc } from 'firebase/firestore';

const db = getFirestore();

await setDoc(doc(db, 'books', 'book1'), { title: 'Learn Firebase' });

let reviewCount = 0;

// Add review1 document inside reviews subcollection
// Your code here

Hint

Use setDoc with doc(db, 'books', 'book1', 'reviews', 'review1') to add the review document.

4

Update the reviewCount field in the book1 document

Update the reviewCount field in the book1 document to 1.

Firebase

import { getFirestore, doc, setDoc } from 'firebase/firestore';

const db = getFirestore();

await setDoc(doc(db, 'books', 'book1'), { title: 'Learn Firebase' });

let reviewCount = 0;

await setDoc(doc(db, 'books', 'book1', 'reviews', 'review1'), { user: 'Alice', comment: 'Great book!' });

// Update reviewCount field in book1 document
// Your code here

Hint

Use setDoc with { merge: true } to update only the reviewCount field.

Practice

1. What is a subcollection in Firebase Firestore?

easy

A. A backup copy of a collection stored in another region

B. A special type of document that stores user credentials

C. A collection nested inside a document to organize related data

D. A collection that automatically deletes old documents

Solution

1. Step 1: Understand Firestore data structure

   Firestore stores data in collections and documents. Documents can contain subcollections.

2. Step 2: Define subcollection purpose

   A subcollection is a collection inside a document used to organize related data hierarchically.

3. Final Answer:

   A collection nested inside a document to organize related data -> Option C

4. Quick Check:

   Subcollection = nested collection inside document [OK]

Hint: Subcollections are collections inside documents [OK]

Common Mistakes:

• Thinking subcollections are special documents
• Confusing subcollections with backups
• Assuming subcollections auto-delete data

2. Which of the following is the correct way to access a subcollection named comments inside a document with ID post1 in the posts collection?

easy

A. db.collection('comments').doc('post1').collection('posts')

B. db.collection('posts').collection('post1').doc('comments')

C. db.doc('posts/post1/comments')

D. db.collection('posts').doc('post1').collection('comments')

Solution

1. Step 1: Identify the correct chaining method

   To access a subcollection, first get the parent collection, then the document, then the subcollection.

2. Step 2: Match the correct syntax

   db.collection('posts').doc('post1').collection('comments') correctly chains collection('posts'), doc('post1'), then collection('comments').

3. Final Answer:

   db.collection('posts').doc('post1').collection('comments') -> Option D

4. Quick Check:

   Access subcollection by chaining collection, doc, collection [OK]

Hint: Chain collection, doc, then subcollection to access nested data [OK]

Common Mistakes:

• Swapping doc and collection order
• Using doc() instead of collection() for subcollections
• Trying to access subcollection directly without parent doc

3. Given the following code snippet, what will console.log(snapshot.docs.length) output if the comments subcollection has 3 documents?

const commentsRef = db.collection('posts').doc('post1').collection('comments');
const snapshot = await commentsRef.get();
console.log(snapshot.docs.length);

medium

A. 3

B. 1

C. 0

D. undefined

Solution

1. Step 1: Understand what get() returns

   The get() method on a collection reference returns a snapshot containing all documents in that collection.

2. Step 2: Count documents in the snapshot

   snapshot.docs.length gives the number of documents retrieved, which is 3 as stated.

3. Final Answer:

   3 -> Option A

4. Quick Check:

   Docs count in subcollection = 3 [OK]

Hint: snapshot.docs.length shows number of documents fetched [OK]

Common Mistakes:

• Assuming get() returns a single document
• Confusing docs.length with data length
• Expecting undefined if subcollection exists

4. You wrote this code to add a comment to a post's subcollection but it throws an error:

const commentRef = db.collection('posts').collection('post1').collection('comments').doc();
await commentRef.set({ text: 'Nice post!' });

What is the error in this code?

medium

A. Using collection('post1') instead of doc('post1') to access the post document

B. Missing await keyword before set()

C. doc() requires an ID argument

D. Cannot add documents to subcollections

Solution

1. Step 1: Check the chaining of collection and doc

   Subcollections must be accessed by first selecting the parent document with doc('post1'), not collection('post1').

2. Step 2: Identify the incorrect method call

   Using collection('post1') treats 'post1' as a collection, causing an error.

3. Final Answer:

   Using collection('post1') instead of doc('post1') to access the post document -> Option A

4. Quick Check:

   Access document with doc(), not collection() [OK]

Hint: Use doc() for documents, collection() for collections [OK]

Common Mistakes:

• Confusing collection() and doc() methods
• Assuming doc() always needs an ID
• Thinking subcollections can't have new documents

5. You want to model a blog where each post has multiple comments stored as a subcollection. Which approach is best to keep your Firestore database scalable and organized?

hard

A. Store all comments in a single top-level collection named 'comments' with a postId field

B. Store comments as a subcollection inside each post document

C. Store comments inside the post document as an array field

D. Create a separate Firestore database for comments

Solution

1. Step 1: Consider Firestore best practices for related data

   Storing comments as a subcollection inside each post keeps related data grouped and queries efficient.

2. Step 2: Evaluate other options

   Store all comments in a single top-level collection named 'comments' with a postId field can cause large collections and complex queries; Store comments inside the post document as an array field risks document size limits; Create a separate Firestore database for comments is unnecessary complexity.

3. Final Answer:

   Store comments as a subcollection inside each post document -> Option B

4. Quick Check:

   Subcollections keep related data organized and scalable [OK]

Hint: Use subcollections for related lists to keep data organized [OK]

Common Mistakes:

• Putting large arrays inside documents risking size limits
• Using one big collection causing slow queries
• Creating multiple databases unnecessarily