久しぶりにReactでfirebase使おうと思ったんだけど、なんか使い方変わってない？？

久しぶりにfirebaseが使いたくなったわけですが、接続方法に戸惑ってしまったのでメモ。

まずはfirebaseのインストール

npm install firebase

次にコード

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  //　接続情報
};

initializeApp(firebaseConfig);
const db = getFirestore();

export default db;
import db from "../firebase";
import { doc, getDoc } from "firebase/firestore";

import Button from "@mui/material/Button";

export default function Page() {

  const handleClick = async () => {
    const hoge = await getDoc(doc(db, コレクション名, ドキュメント名));
    console.log(hoge.data());
  };

  return (
    <div>
      <Button onClick={handleClick}>Button</Button>
    </div>
  );
}

前にfirebase使ってたのが1年くらい前のことなんで、記憶があやふやなのですが、以前は『firebase.firestore()』とかして、get()～とかでデータ取り出してた気がする。

いつの間に変わったか、私の記憶が曖昧なのか、、、

とりあえず接続できたのでよしとします。

てきとうにいろいろプログラミング

Posted by boku