React-admin 集成 Firebase 点击编辑按钮提示“Element doesn't exist”问题求助

Hey there, let's break down why you're hitting that "Element doesn't exist" error when trying to edit posts. Create and delete are working, so your core Firebase connection is solid—this is almost certainly an issue with how post IDs are being handled in your code.

What's Causing the Problem? #

Looking at your AboutCreate component, you defined const timestamp = Date.now().toString() outside the component function, then used it in the transform prop to set the post ID. Here's the catch:

• This timestamp is generated only once when the component mounts, not every time you create a new post. So if you make multiple posts without refreshing the page, they'll all share the same ID—overwriting each other in Firestore.
• Even if you refresh between creates, when you go to edit a post, React-admin uses the ID from the list to fetch the document. If that ID doesn't exactly match what's stored in Firestore (like from accidental overwrites), you'll get the "Element doesn't exist" error.

Step-by-Step Fixes #

1. Generate a Unique ID for Each New Post (Quick Fix) #

Move the timestamp generation inside the transform function so it creates a fresh unique ID every time you submit the create form:

export function AboutCreate(props){
 const classes = useStyles();
 // Generate a new timestamp on every create submission
 const transform = data => ({ ...data, id: Date.now().toString() });
 return(
 <Create {...props} className={classes.create} transform={transform}>
 {/* Rest of your form code stays unchanged */}
 </Create>
 )
}

2. Let Firestore Auto-Generate IDs (Recommended) #

The most reliable approach is to let Firestore handle ID generation automatically. Just remove the transform prop entirely from the Create component—react-admin-firebase will handle creating a unique document ID for you:

export function AboutCreate(props){
 const classes = useStyles();
 return(
 <Create {...props} className={classes.create}>
 {/* Rest of your form code stays unchanged */}
 </Create>
 )
}

3. Verify Document IDs Match #

Head to your Firebase Console, navigate to the about collection, and check the document IDs there. Make sure they exactly match the id values shown in your React-admin list. If there's a mismatch (like duplicates from the old setup), clean up those duplicate documents to avoid confusion.

4. Use Logs to Debug #

Since you have logging: true in your Firebase options, open your browser's dev tools console. When you click the edit button, you'll see a log entry showing which ID the data provider is trying to fetch. Copy that ID and search for it directly in Firestore—if it doesn't exist, that confirms the ID mismatch issue.

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