Firebase Firestore数据读写时遭遇autofillContentScript.bundle.js TypeError问题求助

Hey there, let's break down your problem step by step:

First, let's parse the error you're seeing #

Your error stack trace points to an external script, not your own code:

autofillContentScript.bundle.js:23 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'includes') at autofillContentScript.bundle.js:23:256161 at p (autofillContentScript.bundle.js:23:4111) at Generator._invoke (autofillContentScript.bundle.js:23:3899) at Generator.next (autofillContentScript.bundle.js:23:4540) at e (autofillContentScript.bundle.js:23:166490) at s (autofillContentScript.bundle.js:23:166693) at autofillContentScript.bundle.js:23:166752 at new Promise () at autofillContentScript.bundle.js:23:166633 at go (autofillContentScript.bundle.js:23:259494)

This autofillContentScript.bundle.js file isn't part of Firebase or your app's code — it's almost certainly injected by browser-native autofill features (like Chrome's password autofill) or a third-party password manager extension (such as LastPass, 1Password, etc.).

Your Firebase code has a small robustness gap, but it's not the cause of this specific error. Let's cover both fixing the immediate error and strengthening your code.

Step 1: Fix the autofill-related error #

Since the error comes from an external autofill script, try these steps to eliminate it:

• Temporarily disable all browser extensions: Refresh your page and see if the error goes away. If it does, re-enable extensions one by one to find the culprit — then update that extension or switch to an alternative tool.
• Turn off browser autofill: For example, in Chrome, go to Settings > Privacy and Security > Autofill, then toggle off password, address, and other autofill options. Test your page again.
• Use incognito/private mode: This mode disables most extensions by default, so it's a quick way to confirm if extensions are the root cause.

Step 2: Improve your Firebase code (to avoid future errors) #

While your current error isn't from this, your code doesn't handle cases where the Firestore document might not exist. If videos/conditions is deleted or never created, doc.data() will return null, and accessing data.subject will throw a similar "Cannot read properties of null" error. Here's the updated, more robust code:

document.addEventListener("DOMContentLoaded", event => { 
  const app = firebase.app(); 
  const db = firebase.firestore(); 
  const myVid = db.collection('videos').doc('conditions'); 
  myVid.onSnapshot(doc => { 
    const data = doc.data();
    // Check if the document exists before accessing its properties
    if (data) {
      console.log(data.subject);
      console.log(data.page);
    } else {
      console.log("The 'conditions' document doesn't exist or was deleted.");
    }
  }); 
}); 

function update(e){ 
  const db = firebase.firestore(); 
  const myVid = db.collection('videos').doc('conditions'); 
  myVid.update({ subject: e.target.value })
  // Add error handling to catch update failures
  .catch(error => console.error("Failed to update subject:", error));
} 

function val(e) { 
  const db = firebase.firestore(); 
  const myVid = db.collection('videos').doc('conditions'); 
  myVid.update({ page: e.target.value })
  // Add error handling here too
  .catch(error => console.error("Failed to update page:", error));
}

Step 3: If the error persists #

If you've tried the above and still see the error:

• Update your browser to the latest version — older versions might have bugs in the built-in autofill scripts.
• Clear your browser's site data (not just cache) for your app, then reload.

Wrap-up #

Your current error has nothing to do with your Firebase logic — it's a problem with external autofill scripts injected into your page. Focus on disabling extensions or turning off autofill first, then update your code to handle edge cases like missing documents.

内容的提问来源于stack exchange，提问作者armory victory