React Todo应用中Snapshot Listener错误与Firebase权限不足问题的排查及解决

Hey there! I’ve been in your shoes before—getting that permission error when trying to pair Firebase with React can be super frustrating, but let’s break this down and fix it step by step.

问题原因 #

Firebase Firestore ships with default security rules that block all read/write operations out of the box. This is a critical safety measure to keep your data from being accessed or modified by random people online. When your code calls db.collection('todos').onSnapshot(), it’s trying to pull data from the todos collection, but the default rules are basically saying "nope, not allowed!"

Here’s what those restrictive default rules look like:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

解决方法 #

1. 临时放宽权限（仅用于开发环境） #

For your local development workflow, you can temporarily loosen the rules to allow read/write access. Never use this setup in production—it leaves your database wide open to anyone on the internet!

Update your Firestore rules to this:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      // 允许读写直到2025年1月1日，到期自动锁死，避免你忘记修改规则上线
      allow read, write: if request.time < timestamp.date(2025, 1, 1);
    }
  }
}

To apply these rules:

• Open your Firebase Console
• Navigate to Firestore Database → Rules tab
• Replace the existing rules with the code above
• Click "Publish"

2. Fix your addTodo function (you’re not saving to Firebase yet!) #

Looking at your code, your addTodo only updates the local React state—it doesn’t actually save the todo to Firestore. That’s why even after fixing permissions, you might not see data sync properly. Let’s update it:

const addTodo = (event) => {
  event.preventDefault();
  
  // 把todo写入Firebase Firestore
  db.collection('todos').add({
    todo: input,
    // 可选：添加服务器时间戳，方便后续排序或追踪创建时间
    timestamp: db.firestore.FieldValue.serverTimestamp()
  });
  
  setInput('');
  // 删掉这行，因为onSnapshot会自动监听Firebase的变化并更新state
  // setTodos([...todos, input]);
}

Now when you click "Add todo", the data will be saved to Firestore, and your useEffect with onSnapshot will automatically pick up the new todo and update your todos state in real-time.

3. Production-ready rules (critical for launch!) #

Once you’re ready to deploy your app, you need to tighten up the rules to protect your data. For example, if you add Firebase Authentication later, you can restrict access to only logged-in users:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /todos/{todoId} {
      allow read, write: if request.auth != null;
    }
  }
}

This ensures only authenticated users can read or write to your todos collection.

快速验证 #

After updating the rules and fixing your addTodo function:

1. Refresh your React app
2. Add a todo
3. Check your Firestore Console—you should see the todo appear in the todos collection
4. The todo should show up in your app automatically thanks to onSnapshot

内容的提问来源于stack exchange，提问作者Chandler Bing