Läsa och skriva Firestore-dokument
Lägg till, läs, uppdatera och ta bort dokument i en Firestore-samling med Firestore-modulen, strukturera data med undersamlingar och tillämpa säkerhetsregler.
Läsa och skriva Firestore-dokument är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Firestore-datamodell
Cloud Firestore är en NoSQL-dokumentdatabas. Data organiseras i samlingar (ungefär som mappar) som innehåller dokument (ungefär som JSON-filer). Varje dokument har ett unikt ID och en uppsättning nyckel-värde-fält. Dokument kan innehålla undersamlingar för nästlade data.
En posts-samling kan till exempel innehålla många inläggsdokument, där varje dokument har fält som title, content och userId. Ett inläggsdokument kan ha en nästlad comments-undersamling för sina svar. Den här modellen skalas på ett annat sätt än SQL – tänk först på åtkomstmönstren och modellera sedan data därefter.
Hämta en samlingsreferens
Åtkom en Firestore-samling med firestore().collection('collection-name'). Detta returnerar en CollectionReference som Ni använder för att läsa dokument, lägga till nya dokument eller lyssna efter ändringar. Samlingsreferenser är resurssnåla och utlöser inga nätverksanrop på egen hand.
Om Ni vill referera till ett specifikt dokument i en samling kedjar Ni .doc('document-id'). Om Ni vill att Firestore ska generera ett slumpmässigt ID utelämnar Ni argumentet när Ni skapar ett nytt dokument med .add().
import firestore from '@react-native-firebase/firestore';
// Reference to the 'posts' collection
const postsRef = firestore().collection('posts');
// Reference to a specific post document
const postRef = firestore().collection('posts').doc('post-id-123');
// Reference to a sub-collection
const commentsRef = firestore()
.collection('posts')
.doc('post-id-123')
.collection('comments');Lägga till ett dokument
Använd .add(data) på en samlingsreferens för att skapa ett nytt dokument med ett ID som genereras av Firestore. Använd .doc(id).set(data) för att skapa eller skriva över ett dokument med ett specifikt ID.
Verktyget firestore.FieldValue.serverTimestamp() anger en tidsstämpel på serversidan, vilket säkerställer att alla klienter ser samma skapandetid oavsett skillnader mellan enheternas klockor. Använd alltid servertidsstämplar för fälten createdAt och updatedAt.
// Add with auto-generated ID
const newPost = await firestore().collection('posts').add({
title: 'Hello Firestore',
content: 'My first post!',
userId: auth().currentUser?.uid,
createdAt: firestore.FieldValue.serverTimestamp(),
});
console.log('New post ID:', newPost.id);
// Set with specific ID
await firestore().collection('users').doc(userId).set({
displayName: 'Alice',
email: 'alice@example.com',
createdAt: firestore.FieldValue.serverTimestamp(),
});Läsa ett enskilt dokument
Anropa .get() på en DocumentReference för att hämta dokumentet en gång. Resultatet är en DocumentSnapshot. Kontrollera snapshot.exists innan Ni läser data – om dokumentet aldrig har skapats är exists false och snapshot.data() returnerar undefined.
Metoden snapshot.data() returnerar ett vanligt JavaScript-objekt med dokumentets alla fält. Dokument-ID:t nås via snapshot.id, inte via dataobjektet.
async function getPost(postId: string) {
const snapshot = await firestore().collection('posts').doc(postId).get();
if (!snapshot.exists) {
console.log('Post not found');
return null;
}
const data = snapshot.data();
return { id: snapshot.id, ...data };
}Fråga en samling
Använd .where(field, operator, value) för att filtrera dokument, .orderBy(field, 'desc') för att sortera och .limit(n) för att begränsa antalet resultat. Kedja flera anrop av .where för AND-logik. Anropa .get() för att köra frågan och ta emot en QuerySnapshot.
Iterera över resultaten med snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })). Firestore kräver sammansatta index för frågor som filtrerar och sorterar efter olika fält – om ett index saknas skriver Firestore ut en länk i loggarna där Ni kan skapa det index som krävs.
async function getUserPosts(userId: string) {
const snapshot = await firestore()
.collection('posts')
.where('userId', '==', userId)
.orderBy('createdAt', 'desc')
.limit(20)
.get();
return snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
}Uppdatera ett dokument
Använd .update() för att ändra specifika fält utan att skriva över hela dokumentet. Endast de fält Ni anger ändras – alla andra fält förblir oförändrade. Detta skiljer sig från .set(), som som standard ersätter hela dokumentet.
Använd firestore.FieldValue.increment(n) för att atomiskt öka ett numeriskt fält utan att först läsa det. Använd firestore.FieldValue.arrayUnion(item) och arrayRemove(item) för att atomiskt lägga till eller ta bort objekt i arrayfält.
// Update specific fields
await firestore().collection('posts').doc(postId).update({
title: 'Updated Title',
updatedAt: firestore.FieldValue.serverTimestamp(),
});
// Atomic increment (e.g., a like counter)
await firestore().collection('posts').doc(postId).update({
likesCount: firestore.FieldValue.increment(1),
});
// Add a tag to an array without duplicates
await firestore().collection('posts').doc(postId).update({
tags: firestore.FieldValue.arrayUnion('react-native'),
});Ta bort ett dokument
Anropa .delete() på en DocumentReference för att ta bort dokumentet. Detta tar endast bort själva dokumentet, inte eventuella undersamlingar som det innehåller. Om Ni vill ta bort undersamlingar måste Ni ta bort varje dokument i dem rekursivt – Firestore kaskadraderar inte automatiskt.
Om Ni vill ta bort ett enskilt fält från ett dokument utan att ta bort själva dokumentet använder Ni firestore.FieldValue.delete() i ett anrop av .update(), med fältnamnet som nyckel.
// Delete a document
await firestore().collection('posts').doc(postId).delete();
// Delete a specific field within a document
await firestore().collection('users').doc(userId).update({
temporaryData: firestore.FieldValue.delete(),
});Batchskrivningar
En batchskrivning låter Er utföra flera skapande-, uppdaterings- och borttagningsåtgärder som en enda atomisk transaktion. Antingen lyckas alla åtgärder eller också ingen av dem. Detta är viktigt för åtgärder som måste förbli konsekventa, till exempel när krediter överförs mellan användare.
Skapa en batch med firestore().batch(), lägg till åtgärder med batch.set(), batch.update() och batch.delete() och verkställ sedan med batch.commit(). Batchar har stöd för upp till 500 åtgärder samtidigt.
const batch = firestore().batch();
// Create a post
const postRef = firestore().collection('posts').doc();
batch.set(postRef, { title: 'Batch Post', userId });
// Increment user post count
const userRef = firestore().collection('users').doc(userId);
batch.update(userRef, { postCount: firestore.FieldValue.increment(1) });
// Execute both operations atomically
await batch.commit();
console.log('Batch write complete');Firestore-säkerhetsregler
Firestore-säkerhetsregler styr vem som får läsa och skriva dokument. Reglerna definieras i Firebase-konsolen under Firestore > Rules med ett deklarativt DSL. Objektet request.auth ger Er tillgång till den autentiserade användarens UID i regeluttryck.
Börja alltid med neka alla som standard och tillåt uttryckligen endast det som behövs. En regel som endast tillåter en användare att skriva till sitt eget användardokument ser ut så här: allow write: if request.auth.uid == userId;
// firestore.rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Deny all by default
match /{document=**} {
allow read, write: if false;
}
// Users can read/write their own profile
match /users/{userId} {
allow read: if request.auth != null;
allow write: if request.auth.uid == userId;
}
// Posts are public to read, but only the author can write
match /posts/{postId} {
allow read: if true;
allow create: if request.auth != null;
allow update, delete: if request.auth.uid == resource.data.userId;
}
}
}Slå samman data med set och merge
Som standard skriver .set(data) över hela dokumentet. Om Ni vill slå samman nya data med befintliga fält i stället för att skriva över dem skickar Ni { merge: true } som det andra argumentet.
Detta är användbart när Ni vill skapa ett dokument om det inte finns, eller uppdatera det om det finns – utan att känna till alla dess aktuella fält. Det är ett mer flexibelt alternativ till .update(), som kastar ett fel om dokumentet inte finns.
// set WITHOUT merge: overwrites the entire document
await firestore().collection('profiles').doc(userId).set({
displayName: 'Alice',
});
// Existing fields like 'bio' would be DELETED
// set WITH merge: only updates specified fields
await firestore().collection('profiles').doc(userId).set({
displayName: 'Alice',
}, { merge: true });
// Existing fields like 'bio' are preservedHantera offline-skrivningar
Firestore har en inbyggd lokal cache och köar skrivningar när enheten är offline. När anslutningen återkommer skickar Firestore automatiskt de köade skrivningarna till servern i rätt ordning. Ur appens perspektiv lyckas skrivningarna omedelbart – gränssnittet uppdateras utan att vänta på servern.
Det innebär att Er React Native-app kan fortsätta fungera fullt ut utan internetanslutning för läsningar och skrivningar, medan Firestore hanterar synkroniseringen transparent. Ni kan identifiera online- och offlinestatus med en NetInfo-lyssnare om Ni behöver visa anslutningsstatus i gränssnittet.
// Firestore enables offline persistence by default on mobile.
// This write succeeds even without internet connection:
await firestore().collection('drafts').doc(draftId).set({
content: 'Work in progress...',
savedAt: firestore.FieldValue.serverTimestamp(),
});
// When connectivity returns, Firestore syncs automatically.
// No additional code required.Snabbtest
Testa Er förståelse av begreppen inom React Native Mobile Development från den här lektionen.
Sammanfattning av lektionen
I den här lektionen har Ni lärt Er: Firestores datamodell med samlingar och dokument, hur man lägger till, läser, uppdaterar och tar bort dokument med React Native Firebase SDK samt hur batchskrivningar säkerställer atomiska åtgärder över flera dokument. Härnäst lägger vi till realtidslyssnare för att ta emot liveuppdateringar från Firestore och konfigurerar offline-persistens.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Läsa och skriva Firestore-dokument” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Läsa och skriva Firestore-dokument”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Läsa och skriva Firestore-dokument”?
Lägg till, läs, uppdatera och ta bort dokument i en Firestore-samling med Firestore-modulen, strukturera data med undersamlingar och tillämpa säkerhetsregler. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Läsa och skriva Firestore-dokument”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Anslut React Native Firebase till projektet
- E-post- och telefonautentisering med Firebase
- Läsa och skriva Firestore-dokument
- Realtidslyssnare och offlinepersistens