开发者问题收集

React Native：firestore/firebase 预期 collection() 的第一个参数是 CollectionReference……怎么做到的？

2021-11-08
803
javascript firebase react-native google-cloud-firestore

因此，我有一个简单的 React Native 应用，它是使用 Expo 创建的，并在我的个人 Android 设备上进行调试。

我已将 firebase/firestore 包含到我的应用中，现在正尝试在单击按钮时向 firestore 添加一个对象。

这是我的代码：

firebaseConfig.js : 

import { initializeApp } from '@firebase/app';

var config = {
    ...
}
  
const app = initializeApp(config);

export default app;

组件：

从 '../firebaseConfig' 导入 { app }； 从 'firebase/firestore/lite' 导入 { getFirestore }； 从“firebase/firestore”导入 { doc, setDoc, collection, query, where, getDocs, initializeFirestore }； ...

export default function Component() { const firestoreDb = getFirestore(app); 

// this function is called when clicking a button
const onAddListPress = () => {
    setDoc(doc(firestoreDb, "cities", "LA"), {
        name: "Los Angeles",
        state: "CA",
        country: "USA"
    });
}

>

这会引发以下错误： 

Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

上面的代码（在 onPress 中）是从官方 firestore 文档复制而来，此处： https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document

有人知道为什么这不起作用吗？

1个回答

我建议您编辑您的帖子并删除 firebaseConfig 配置键，或者删除您的 Firebase 应用并从 Firebase 控制台创建一个新应用以保护您的应用。我尝试使用 React 复制您的应用，但收到了相同的错误消息。我进行了两项更改以更正错误。第一个是在 firebaseConfig 文件 内，需要将默认导出更改为命名导出： 

import { initializeApp } from "firebase/app"

const firebaseConfig = {
    //Project configuration keys
};

const app = initializeApp(firebaseConfig);

export { app }; // Change from a default to a named export

此外，组件内的所有导入都应来自完整的 Javascript SDK，而不是精简版。精简版有一些 限制 ，可能会导致此 特定 错误。 

import { app } from "./firestore-config";
import { getFirestore, getDoc, doc } from "firebase/firestore";
import './App.css';

export default function App() {
  const firestoreDB = getFirestore(app);
  const docRef = doc(firestoreDB, "users", "testUser1");

  const getData = async () => {
    const data = await getDoc(docRef);
    console.log(data);
  }

  getData();
  return <div className="App"></div>;
}

如果您使用 yarn 来管理依赖项，您可能还需要查看此 GitHub 问题 。

ErnestoC
2021-11-10