创建firebase项目后获取-未定义

Question

我有一个async函数，用于向topics集合添加一个新项。

它工作得很好，但问题是我想用我刚刚创建的项目刷新React中的主题数组，但我无法在.then()属性中获得新项目的信息。

我已经搜索过了，当firebase工作时，下面的例子中.then()会工作:

db.collection("cities").add({
name: "Tokyo",
country: "Japan"
})

我当前的功能是:

const handleSubmitTopic = async () => {
const topicRef = collection(db, "topics");
try {
await setDoc(doc(topicRef), {
userUID: user.uid,
name: topicText,
});
} catch (e) {
console.log(e);
}
};

如果我使用

.then((e) => {
console.log(e)
}

我得到一个undefined

Answer 1

当您调用setDoc(docRef, data)(或旧sdk中的docRef.set(data))时，您更新该文档的数据并返回Promise<void>。

当您调用addDoc(colRef, data)(或旧sdk中的colRef.add(data))时，您将在该集合中创建一个新文档并返回Promise<DocumentReference>。

两个选项都不会返回传入的数据。相反，您应该使用onSnapshot(colRef, observer)(或旧sdk中的colRef.onSnapshot(observer))侦听包含新文档的集合。无论何时发生变化，包括使用set/add/update/etc在本地添加数据时，该观察者都会将其next()事件处理程序用集合的最新数据作为QuerySnapshot对象触发。

虽然这看起来可能违反直觉，但它允许您使用以下代码来消除文档集合(并且在添加/删除主题时保持更新):

const db = /* firestore instance (e.g. from parameter) */;
const [topics, setTopics] = useState();
const [errorMsg, setErrorMsg] = useState();
useEffect(() => {
const colRef = collection(db, "topics");
return onSnapshot( // <-- onSnapshot creates and returns its unsubscriber
colRef,
{
next: (querySnapshot) => {
setTopics(
querySnapshot.docs
.map(topicDoc => ({
...topicDoc.data(), // <- this unwraps the snapshot's data into a normal object, along with its document ID
id: topicDoc.id
}))
);
setErrorMsg(null);
},
error: (err) => {
setTopics(null);
// TODO: handle database errors (e.g. permissions, connection loss,  etc.)
// prefer Firebase error codes over the error's message if available
// (or the use the error itself if neither is available)
setErrorMsg(err.code || err.message || err);
}
}
);
}, [db]); // update whenever db is updated
// TODO: use errorMsg/topics as appropriate - such as:
if (topics === undefined) // undefined? still loading!
return (<div>Loading...</div>);
if (topics === null) // null? you've got an error to display!
return (<div>Error loading topics: { errorMsg || 'unknown error' }</div>);
if (!topics.length) // empty? show an empty table or other message!
return (<div>Error: No topics to display</div>);
// something else? good to render!
return (<>{
topics.map(
topicData => {
/* create topic element from topicData (don't forget the key!) */
return (
<div key={topicData.id}>
{topicData.country} - {topicData.name}
</div>
)
}
)
}</>);