--- title: Firebase Crash Course (Auth & Firestore) #9 - Fetching... description: A step-by-step walkthrough of fetching documents from a Firestore collection in a React app. Covers using getDocs with a collection reference, processing... canonical: https://daily.dev/posts/firebase-crash-course-auth-firestore-9---fetching-documents-vo1ovoeln twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Firebase Crash Course (Auth & Firestore) #9 - Fetching Documents | daily.dev og:description: A step-by-step walkthrough of fetching documents from a Firestore collection in a React app. Covers using getDocs with a collection reference, processing... og:url: https://daily.dev/posts/firebase-crash-course-auth-firestore-9---fetching-documents-vo1ovoeln og:image: https://api.daily.dev/og/posts/Vo1oVoEln.png og:image:alt: Firebase Crash Course (Auth & Firestore) #9 - Fetching Documents og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Firebase Crash Course (Auth & Firestore) #9 - Fetching Documents **[Net Ninja](https://daily.dev/sources/netninja)** · 8 min read · 2 upvotes · 1 comments ## Summary A step-by-step walkthrough of fetching documents from a Firestore collection in a React app. Covers using getDocs with a collection reference, processing document snapshots into typed note objects (including accessing doc.id separately from doc.data()), using the spread operator with TypeScript type assertions for cleaner code, and rendering the resulting list in a React component with useEffect. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I fetch all documents from a Firestore collection in a React app? Use the getDocs function imported from the Firebase Firestore module, passing it a collection reference created with collection(db, 'collectionName'). This returns a snapshot object with a docs array of document snapshots. Map over snapshot.docs, accessing each document's ID via doc.id and its data fields via doc.data(), then store the resulting array in component state, typically inside an async function called from useEffect. _Building a Firestore-backed dashboard? Track React and Firebase updates as you ship it on daily.dev._ ### How do I get the document ID and data fields from a Firestore document snapshot? The document ID is accessed directly with doc.id, while the actual field values (like title, content, or user ID) are accessed by calling doc.data(), which returns an object containing those fields. The ID is not part of the data object itself, so combining doc.id with the spread of doc.data() produces a complete object with both the ID and the stored fields. _Working through Firestore data modeling? Follow ongoing React and Firebase guidance on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@amitgajare** · 0 upvotes > Good video to learn 🔥 base ## Similar posts on daily.dev - [How Firestore Structures Data and How to Perform CRUD Operations With It](https://daily.dev/posts/how-firestore-structures-data-and-how-to-perform-crud-operations-with-it-odioykply) · freeCodeCamp · 1 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript), [#firebase](https://daily.dev/tags/firebase), [#firestore](https://daily.dev/tags/firestore) [View this post on daily.dev](https://daily.dev/posts/firebase-crash-course-auth-firestore-9---fetching-documents-vo1ovoeln) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Firebase Crash Course (Auth & Firestore) #9 - Fetching Documents","url":"https://daily.dev/posts/firebase-crash-course-auth-firestore-9---fetching-documents-vo1ovoeln","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/firebase-crash-course-auth-firestore-9---fetching-documents-vo1ovoeln"},"datePublished":"2026-07-31T14:09:44.976Z","dateModified":"2026-09-14T08:04:38.999Z","description":"A step-by-step walkthrough of fetching documents from a Firestore collection in a React app. Covers using getDocs with a collection reference, processing...","image":"https://i.ytimg.com/vi/I1y5gx2aUaM/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/I1y5gx2aUaM/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Net Ninja","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Net Ninja","logo":"https://media.daily.dev/image/upload/s--IXsAE5jo--/f_auto/v1718348103/logos/netninja","url":"https://daily.dev/sources/netninja"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/firebase-crash-course-auth-firestore-9---fetching-documents-vo1ovoeln","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"javascript,react,typescript,firebase,firestore","timeRequired":"PT8M","video":{"@type":"VideoObject","name":"Firebase Crash Course (Auth & Firestore) #9 - Fetching Documents","description":"A step-by-step walkthrough of fetching documents from a Firestore collection in a React app. Covers using getDocs with a collection reference, processing...","thumbnailUrl":"https://i.ytimg.com/vi/I1y5gx2aUaM/sddefault.jpg","uploadDate":"2026-07-31T14:09:44.976Z","duration":"PT8M","url":"https://api.daily.dev/r/Vo1oVoEln","embedUrl":"https://www.youtube.com/embed/I1y5gx2aUaM"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Net Ninja","item":"https://daily.dev/sources/netninja"},{"@type":"ListItem","position":3,"name":"Firebase Crash Course (Auth & Firestore) #9 - Fetching Documents"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/firebase-crash-course-auth-firestore-9---fetching-documents-vo1ovoeln","comment":[{"@type":"Comment","text":"Good video to learn 🔥 base","datePublished":"2026-08-02T04:53:09.242Z","url":"https://daily.dev/posts/Vo1oVoEln#c-P2MYFZr06","author":{"@type":"Person","name":"Amit Gajare","url":"https://daily.dev/amitgajare","image":"https://media.daily.dev/image/upload/s--7lr6XGRA--/f_auto/v1735367756/avatars/avatar_UU1stgGJldM9pQP0QluF0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/firebase-crash-course-auth-firestore-9---fetching-documents-vo1ovoeln#faq","mainEntity":[{"@type":"Question","name":"How do I fetch all documents from a Firestore collection in a React app?","acceptedAnswer":{"@type":"Answer","text":"Use the getDocs function imported from the Firebase Firestore module, passing it a collection reference created with collection(db, 'collectionName'). This returns a snapshot object with a docs array of document snapshots. Map over snapshot.docs, accessing each document's ID via doc.id and its data fields via doc.data(), then store the resulting array in component state, typically inside an async function called from useEffect. Building a Firestore-backed dashboard? Track React and Firebase updates as you ship it on daily.dev."}},{"@type":"Question","name":"How do I get the document ID and data fields from a Firestore document snapshot?","acceptedAnswer":{"@type":"Answer","text":"The document ID is accessed directly with doc.id, while the actual field values (like title, content, or user ID) are accessed by calling doc.data(), which returns an object containing those fields. The ID is not part of the data object itself, so combining doc.id with the spread of doc.data() produces a complete object with both the ID and the stored fields. Working through Firestore data modeling? Follow ongoing React and Firebase guidance on daily.dev."}}]} ```