JavaScriptにfirebaseをimportし、Cloud Firestoreのデータを操作したい

前提・実現したいこと

HTMLとJavaScript、firebaseを使用して、簡単なデータ操作を行いたいです。
最終的には、
HTMLの入力値(チェックボックスのvalue等)でCloud Firestoreに事前に登録したデータの検索・取得や
HTML（別画面等）からFirestoreへのデータの登録まで。

今回はその前段階として事前に入れたデータの取得をしてfirebaseとの連携ができているか確認したいです。

発生している問題・エラーメッセージ

(1)うまくモジュールがimportできない。
JavaScript(getdata.js)で
import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
と記述していますが、
HTMLのDevツールのコンソールを見ると、
Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".
と出ております。

JSの記述を
  import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js";
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
とCDNを使用する形に変えると上記のエラーはなくなりますが、根本の解決がしたいです。
動画等を見ましたが、このコード以上のことはしておらず。

(2)データ取得ができない。
(1)のCDNを使用する形でJSを実装して、データ取得のメソッドを書いて、コンソールに出力してみましたが
Promise {<pending>}と表示されて、展開しても目的のデータを取得できていませんでした。

上記2点が不明点となります。
そもそも環境構築時点で不足しているものがある場合はご指摘くださると幸いです。

2021/12/09　追記
webpackをインストールし、該当のJSをバンドルしたものをHTML読み込ませたところ、
質問文(1)のエラーはなくなりました。
が、引き続き(2)の問題が残っており、データが取得できない状況です。

下記ソースコードの
console.log(docSnap);をすると、コンソールにはPromise {<pending>}が出力されますが、
こちらが何を表しているかわかりません。。。
また、console.log(docSnap.data());としてみましたが、
docSnap.data　is not function　のエラーメッセージが出ました。

該当のソースコード

JavaScript
1
2  //こちらにすると(1)のエラー。
3  // import { initializeApp } from "firebase/app"
4  // import { getFirestore } from "firebase/firestore"
5
6  //エラーにはならないがデータがうまく取得できない。
7  import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js";
8  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
9
10const firebaseConfig = {
11apiKey: "AIzaSyCiFkYP3ja5lKGPaWt1LONTYTaC28uynos",
12authDomain: "fir-test-ecb07.firebaseapp.com",
13projectId: "fir-test-ecb07",
14// databaseURL: "https://fir-test-ecb07.firebaseio.com",
15storageBucket: "fir-test-ecb07.appspot.com",
16messagingSenderId: "194797486313",
17appId: "1:194797486313:web:1f6aeee178c74cdf42b078",
18measurementId: "G-4YP7BS4YBK"
19};
20initializeApp(firebaseConfig);
21
22const db =  getFirestore();
23
24  const btn = document.getElementById('getbtn');
25
26  const getData = () => {
27
28    const ref = doc(collection( db,'presets'),'preset');
29
30    const docSnap = getDoc(ref);
31
32    if(docSnap){
33//中のデータを呼び出したく、console.log(docSnap.data());としてもエラーとなりました。
34      console.log(docSnap);
35    }else{
36      console.log('false')
37    };
38
39  };
40
41  btn.addEventListener('click' , () => getData());

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link rel="stylesheet" href="/css/style.css">
8  <title>Firebaseを使ってみよう</title>
9</head>
10<body>
11  <h1>ギア取得</h1>
12  <button id="getbtn">
13    データを取得
14  </button>
15  <script type="module" src="/js/getdata.js"></script>
16</body>
17</html>

試したこと

・node.jsをインストールし、以下のコマンドを実行。
∟npm install firebase
∟npm install -g firebase-tools
∟firebase init

・firebaseにてプロジェクトの作成とアプリの登録。
・firebaseにてCloud Firestoreを使用して簡単なデータ作成。
・(1コレクション、1ドキュメント、1データ)
・公式のドキュメントに目を通す。(コードのコピペなど)
・バージョンｖ9の記事を読んでコードを試す。
・YouTubeでひたすら参考動画を漁る。

補足情報（FW/ツールのバージョンなど）

使用しているもの
OS:Windows10
エディタ:VSCode+LiveServer(拡張機能)
ブラウザ:Chrome
DB:firebase Cloud Firestore

バージョン関係
node.js:v16.13.0
npm:8.1.0
firebase:9.23.0

hoshi-takanori

2021/12/08 12:24

いまのところ、ブラウザ上で import を直接使うのはまだ一般的ではなく、webpack などを使って「バンドル」したものを動かすのが普通だと思いますが、そろそろ使えるようになってきたのかな…。 https://qiita.com/kazuma1989/items/1b1a4443925005034f7e