Angular 2 + Firebase无法从数据库获取图片问题求助

Let’s walk through the most likely issues stopping you from retrieving your user-specific images, along with actionable fixes:

1. Fix the Typo in Your Fetch Condition #

Your truncated fetch code shows if(auth && auth.email &am... — this looks like an incomplete HTML entity (you probably meant &&). Make sure your fetch logic properly checks for a valid user UID and uses the exact same path as your save function.

Corrected Fetch Example:

this.firebaseAuth.authState.subscribe(auth => {
  if (auth && auth.uid) { // Ensure we have a valid user identifier
    // Match the path used when saving uploads
    this.db.list(`uploads/${auth.uid}`).valueChanges().subscribe(uploads => {
      this.userUploads = uploads; // Assign to your component's property
    });
  }
});

2. Ensure Path Consistency Between Save and Fetch #

In your save function, you’re using uploads/${auth && auth.email && auth.uid} — while this works if all values exist, it’s more robust to directly use auth.uid (Firebase Auth guarantees a UID for authenticated users). Double-check that your fetch path matches exactly what you used to save.

Simplified, Robust Save Function:

private saveFileData(upload: Upload): void { 
  this.firebaseAuth.authState.subscribe(auth => { 
    if (auth?.uid) { // Optional chaining to avoid null errors
      this.db.list(`uploads/${auth.uid}`).push(upload); 
    }
  }); 
}

3. Verify Firebase Security Rules Allow User-Specific Access #

Even if your code is correct, Firebase Security Rules might be blocking read access. For Realtime Database, set rules to restrict uploads to the authenticated user’s own path:

Realtime Database Rules Example:

{
  "rules": {
    "uploads": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

If using Firestore, adjust the rules like this:

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

4. Check Subscription Management #

Make sure you’re properly subscribing to data changes and cleaning up subscriptions to avoid memory leaks. Use valueChanges() (Realtime Database) or snapshotChanges() and unsubscribe when your component destroys:

Add Unsubscription Logic:

import { Subscription } from 'rxjs';

private uploadsSubscription: Subscription;

// In your fetch code:
this.uploadsSubscription = this.db.list(`uploads/${auth.uid}`).valueChanges().subscribe(uploads => {
  this.userUploads = uploads;
});

// Clean up in ngOnDestroy:
ngOnDestroy() {
  this.uploadsSubscription?.unsubscribe();
}

5. Validate the Upload Object Structure #

Confirm the upload object you’re saving includes the image URL correctly. Log the fetched data to check if the URL is present:

this.db.list(`uploads/${auth.uid}`).valueChanges().subscribe(uploads => {
  console.log('Fetched uploads:', uploads); // Check console for missing URLs
  this.userUploads = uploads;
});

If the URL is missing, double-check how you’re constructing the upload object before saving it (e.g., ensuring you’re including the download URL from Firebase Storage).

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